我在我的网站顶部使用了一个静态栏，大约 20 像素高。当我单击一个锚链接时（对于那些不知道的人，维基百科上的导航就是这样工作的。单击一个标题，浏览器会向下移动到它）部分文本消失在那个顶部栏后面。
有没有办法阻止这种情况发生？我无法使用 iFrame。我唯一能想到的就是让它每次回滚一点，但还有另一种方法吗？一些CSS设置来操纵身体或什么？
问问题
65122 次
7 回答
50
你可以只使用没有任何 javascript 的 CSS。
给你的主播上课：
<a class="anchor"></a>
然后，您可以通过将锚定为块元素并进行相对定位，将锚定位在高于或低于实际出现在页面上的位置的位置。-250px 将锚点向上定位 250px
a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}
由 Jan 看到偏移 html 锚以调整固定标题
于 2013-12-03T17:57:20.957 回答
18
这是一个现代的、单行的、纯 CSS 解决方案：
scroll-margin-top: 20px;
它的作用与听起来的完全一样：就像有边距一样，但仅在滚动上下文中。因此scroll-margin-top: 20px;，在一个元素上意味着单击该元素的锚标记会将页面滚动到元素上方20 像素。
兼容性（见 caniuse）
不支持IE。此外，Safari 版本 11-14 使用非标准名称：（scroll-snap-margin-top但按预期工作）。Safari 14.1+ 使用标准名称。
完整示例：
nav{
position: fixed;
top:0;
left:0;
background: black;
color: white;
width: 100%;
}
#after-nav{
margin-top: 25px;
}
#section-1{
width: 100%;
background: green;
height: 500px;
scroll-margin-top: 20px;
}
#section-2{
width: 100%;
background: blue;
height: 500px;
scroll-margin-top: 20px;
}
ul{
margin-top: 0;
}<nav>
Nav bar: 20px (as in OP)
</nav>
<div id="after-nav">
Table of contents:
<ul>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
</ul>
<div id="section-1">Section 1</div>
<div id="section-2">Section 2</div>
</div>于 2021-02-22T00:42:56.533 回答
9
要使用 CSS 解决此问题，您可以向要跳转到的元素添加填充：
或者，您可以添加边框：
div{
height: 650px;
background:#ccc;
/*the magic happens here*/
border-top:42px solid #fff;
}
ul{
top: 0;
width: 100%;
height:20px;
position: fixed;
background: deeppink;
margin:0;
padding:10px;
}
li{
float:left;
list-style:none;
padding-left:10px;
}
div:first-of-type{
margin-top:0;
}<!-- content to be placed inside <body>…</body> -->
<ul>
<li><a href="#s1">link 1</a>
<li><a href="#s2">link 2</a>
<li><a href="#s3">link 3</a>
<li><a href="#s4">link 4</a>
</ul>
<div id="s1" class="first">1</div>
<div id="s2">2</div>
<div id="s3">3</div>
<div id="s4">4</div>然而，这并不总是适用的。
对于 javascript 解决方案，您可以使用附加到锚元素的单击事件来滚动调整的像素数量，如下所示：
document.querySelector("a").addEventListener("click",function(e){
// dynamically determining the height of your navbar
let navbar = document.querySelector("nav");
let navbarheight = parseInt(window.getComputedStyle(navbar).height,10);
// show 5 pixels of previous section just for illustration purposes
let scrollHeight = document.querySelector(e.target.hash).offsetTop - navbarheight - 5;
/* scrolling to the element taking the height of the static bar into account*/
window.scroll(0,scrollHeight);
/*properly updating the window location*/
window.location.hash = e.target.hash;
/* do not execute default action*/
e.preventDefault();
});nav{
position:fixed;
top:0;
left:0;
right:0;
height:40px;
text-align:center;
background:#bada55;
margin:0;
}
a{
display:block;
padding-top:40px;
}
#section1{
height:800px;
background:repeating-linear-gradient(45deg,#606dbc55,#606dbc55 10px,#46529855 10px,#46529855 20px);
}
#section2{
height:800px;
background:repeating-linear-gradient(-45deg,#22222255,#22222255 10px,#66666655 10px,#66666655 20px);
}<nav>static header</nav>
<a href="#section2">jump to section 2</a>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>于 2012-07-16T09:05:54.643 回答
7
CSS-only：它有点脏，但:target {padding-top: 20px;}如果你链接到一个块元素（我假设你这样做，因为你的问题是 div）。但是，当您之后手动滚动时，它可能看起来不太好。示例http://dabblet.com/gist/3121729
不过，我认为使用一点 JavaScript 来解决这个问题会更好。
于 2012-07-16T09:16:32.853 回答
5
我有同样的问题。这是一个jQuery解决方案
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $trget = $(target);
// Example: your header is 70px tall.
var newTop = $trget.offset().top - 70;
$('html, body').animate ({
scrollTop: newTop
}, 500, 'swing', function () {
window.location.hash = target;
});
});
于 2018-06-05T01:22:24.480 回答
0
尝试window.scrollBy(xnum,ynum);
xnum：沿 x 轴（水平）滚动多少像素 ynum：沿 y 轴（垂直）滚动多少像素
例如：http ://www.w3schools.com/js/tryit.asp?filename=try_dom_window_scrollby
于 2012-07-16T09:13:46.073 回答
0
在搜索了上述所有其他答案之后，对我来说解决滚动锚问题的答案如下：
代码：
#idname {
scroll-margin-top: 20px;
}
感谢上面提出这个答案的人。您显然可以更改边距的像素数。我把它从20px改为40px，它就像一个魅力。
于 2021-10-20T22:30:06.510 回答