css - Div 滚动固定的 div anchor 链接不起作用

Question

我将此代码用于我正在开发的网站。我遇到的问题是向上滚动到固定面板 div。

HTML:

<div id="wrapper">
    <div id="a" class="panels">FIXED PANEL</div>
    <div id="b" class="panels">Scrolling-Panel 1</div>
    <div id="c" class="panels">Scrolling-Panel 2</div>
    <div id="d" class="panels"><a href="#a">Scrolling-Panel 3</a></div>
</div>

CSS:

html,body {
    padding:0;
    margin:0;
    background:black;
}

#wrapper {
    position:absolute;
    height:100%;
    width:100%;
}

.panels {
    position:relative;
    height:100%;
    min-height:100%;
    width:100%;
}

#a{
   background:#eee;
    position:fixed;
    color:red;
    top:0;
}

#b{
   margin-top:100%;
   background:yellow;
}

#c{
   background:pink;
}

#d{
   background:green;
}

fiddle 在这里: http://jsfiddle.net/ygw6b9ga/任何想法/帮助将不胜感激!!

Answer 1

单击指向页面中不同元素的链接 anchor 会告诉浏览器滚动视口(viewport)或相应的包装器，以便元素左上角(在 LTR 页面中)可见。固定元素不会影响滚动区域，因此定位和聚焦它们不会启动此例程。

在您的示例中，您可以定位#wrapper 而不是#a 以重新显示固定 header (<a href="#wrapper">…</a>、fiddle)或使用javascript(<a href="#a" onclick="scrollTo(0,0)">…</a> fiddle)。