DIV锚太远滚动(Div anchors scrolling too far)

我使用的是静吧，在我的网站上，大约20像素高。当我点击一个锚链接（对于那些不知道是谁，在维基百科上的导航功能也类似。点击标题，浏览器出现故障的话）的文本的一部分消失背后顶吧。

有什么办法来阻止这种情况发生？我不是在一个位置，我可以使用iframe。 Onlything我能想到的是让每一次往回滚动一下，但有另一种方式？一些CSS设置来操纵身体的东西？

Answer 1:

要使用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的解决方案，你可以使用连接到滚动像素的调整量像下面的锚定体click事件：

 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 2:

你可以只使用CSS没有任何JavaScript。

给你的锚类：

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

然后可以定位锚的偏移比它实际上在网页上显示较高或较低，通过使其成为一个块元件和相对定位它。 -250px将使起锚250像素

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

由Jan看到抵消HTML锚调整为固定头

Answer 3:

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

不过，我认为用JavaScript代码来解决这个问题会更好。

Answer 4:

我有同样的问题。这里是一个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;
    }); 
});