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

Question

有没有人有 CSS 解决方案来使命名锚点 link 列表中的最后一项将内容定向到顶部？我发现使它起作用的唯一方法是在最后一项下方留出大量空白 space。这是最好的方法吗？唯一可行的方法是使用 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>，因为它只是为了人为地创建space。混淆内容和演示是一种不好的做法。请改用 CSS 中的边距/填充。
我用语义标签替换了标记。你有类似 <div class="section"> 而不是 <section> 的东西。而 #section1, #section2, #section3 实际上是 <span> 标签。非常混乱：S

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

Named anchor jump menu last item position not positioned towards the top

html

css

anchor

menu

named