Question

有没有人有CSS解决方案让命名锚链接列表中的最后一项将内容定位到顶部？我发现让这个工作的唯一方法是在最后一项下方留出足够的空白空间。这是最好的方法吗？可能有效的唯一其他方法是使用JS强制最后一项单击的位置。

https://jsfiddle.net/jacoblett/ejdy4ncd/embedded/result/

https://jsfiddle.net/jacoblett/ejdy4ncd/

CSS

.header {border:1px solid black;background-color:#e2e2e2;position: fixed; top: 0;}

            .anchor {height:150px;}

            article {margin:200px 0;width:600px;}

            .anchor{
              display: block;
              margin-top: 0; 
              visibility: hidden;
            }

HTML

            <div class="header">
            <h1>Named anchor jump link menu</h1>
            <nav>
            <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
            </ul>
            </nav>
            </div>
            <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <span class="anchor" id="section1"></span>
            <div class="section">
            <h1>Section 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

            <span class="anchor" id="section2"></span>
            <div class="section">
            <h1>Section 2</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

            <span class="anchor" id="section3"></span>
            <div class="section">
            <h1>Section 3</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            </article>

Answer 1

请查看这是否符合您的要求：https://jsfiddle.net/ejdy4ncd/23/

解释一下：

您的问题取决于屏幕高度，因此解决方案也取决于屏幕高度。
我删除了<span>，因为它仅用于人工创建空间。混淆内容和演示文稿是一种不好的做法。请改用CSS中的margin / padding。
我用语义标签替换了标记。你有<div class="section">而不是<section>之类的东西。 #section1, #section2, #section3实际上是<span>个标签。很困惑：S

命名锚定跳转菜单最后一个项目位置未定位到顶部

1 个答案: