Question

我在我的网站顶部使用静态栏，大约20px高。当我点击一个锚点链接时（对于那些不知道的人来说，维基百科上的导航就是这样的。点击一个标题，然后浏览器就会显示出来）。文本的一部分消失在顶栏后面。

有没有办法阻止这种情况发生？我不能使用iFrame。我能想到的只是让它每次都回滚一下，但还有另外一种方法吗？一些CSS设置来操纵身体或什么？

Answer 1

你可以在没有任何javascript的情况下使用CSS。

给你的主持人上课：

<a class="anchor"></a>

然后，您可以将锚点设置为高于或低于页面实际显示位置的偏移量，方法是将其设置为块元素并相对定位。 -250px将锚定位置为250px

a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

截至1月见offsetting an html anchor to adjust for fixed header

Answer 2

仅限CSS ：它有点脏，但如果你链接到一个块元素，:target {padding-top: 20px;}将起作用（我假设你这样做，因为你的问题说div）。但是，之后手动滚动可能看起来不太好。示例http://dabblet.com/gist/3121729

尽管如此，我认为使用一些JavaScript来解决这个问题会更好。

Answer 3

要使用CSS修复此问题，您可以为要跳转到的元素添加填充：

<强> Example

或者，您可以添加边框：

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>

Answer 4

这是一个现代的、单行的、纯 CSS 解决方案 (no support for IE)：

scroll-margin-top: 20px;

它确实像听起来一样：就像有边距一样，但仅在滚动上下文中。因此，元素上的 scroll-margin-top: 20px; 意味着单击该元素的锚标记会将页面滚动到上方元素的 20 像素。

完整示例：

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>

Answer 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;
    }); 
});

Answer 6

尝试使用window.scrollBy(xnum,ynum);

xnum：沿x轴（水平）滚动的像素数 ynum：沿y轴（垂直）滚动的像素数

例如：http://www.w3schools.com/js/tryit.asp?filename=try_dom_window_scrollby

Div锚点滚动得太远了

6 个答案:

这是一个现代的、单行的、纯 CSS 解决方案 (no support for IE)：