使锚点链接转到它所链接的上面的一些像素

我不确定询问/search这个问题的最佳方式:

当你点击一个锚点链接,它会带你到页面的那一部分,链接到的区域现在在页面的最上面。 我希望锚链接将我发送到页面的那一部分,但是我希望顶部有一些空间。 如在,我不希望它把我的链接到它的部分在极高的顶部,我想在那里100个像素的空间。

这有道理吗? 这可能吗?

编辑显示代码 – 它只是一个锚标记:

<a href="#anchor">Click me!</a> <p id="anchor">I should be 100px below where I currently am!</p> 
 window.addEventListener("hashchange", function () { window.scrollTo(window.scrollX, window.scrollY - 100); }); 

这将允许浏览器做我们跳到锚点的工作,然后我们将使用该位置来抵消。

编辑1:

就像@erb指出的那样,只有当你在页面上而散列被改变时,这才起作用。 使用上面的代码不能使用URL中已经存在的#something进入页面。 这是另一个版本来处理:

 // The function actually applying the offset function offsetAnchor() { if(location.hash.length !== 0) { window.scrollTo(window.scrollX, window.scrollY - 100); } } // This will capture hash changes while on the page window.addEventListener("hashchange", offsetAnchor); // This is here so that when you enter the page with a hash, // it can provide the offset in that case too. Having a timeout // seems necessary to allow the browser to jump to the anchor first. window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing). 

注意:要使用jQuery,可以在示例中用$(window).on代替window.addEventListener 谢谢@ Neon。

编辑2:

正如less数人所指出的那样,如果您连续两次或多次点击相同的锚链接,因为没有hashchange事件来强制偏移量,上述操作将失败。

这个解决scheme是来自@Mave的build议的非常小的修改版本,为简单起见使用jQueryselect器

 // The function actually applying the offset function offsetAnchor() { if (location.hash.length !== 0) { window.scrollTo(window.scrollX, window.scrollY - 100); } } // Captures click events of all <a> elements with href starting with # $(document).on('click', 'a[href^="#"]', function(event) { // Click events are captured before hashchanges. Timeout // causes offsetAnchor to be called after the page jump. window.setTimeout(function() { offsetAnchor(); }, 0); }); // Set the offset when entering page with hash present in the url window.setTimeout(offsetAnchor, 0); 

这个例子的JSFiddle就在这里

只使用CSS你可以添加一个填充锚定元素(如上面的解决scheme)为了避免不必要的空白,你可以添加一个相同高度的负边距:

 #anchor { padding-top: 50px; margin-top: -50px; } 

我不知道这是否是最好的解决scheme,但它对我来说工作得很好。

更好的解决scheme:

 <p style="position:relative;"> <a name="anchor" style="position:absolute; top:-100px;"></a> I should be 100px below where I currently am! </p> 

只需将绝对定位的<a>标签放置在相对定位的对象内。

进入页面或通过页面内的哈希更改时工作。

最佳解决scheme

 <span class="anchor" id="section1"></span> <div class="section"></div> <span class="anchor" id="section2"></span> <div class="section"></div> <span class="anchor" id="section3"></span> <div class="section"></div> <style> .anchor{ display: block; height: 115px; /*same height as header*/ margin-top: -115px; /*same height as header*/ visibility: hidden; } </style> 

要链接到一个元素,然后使用纯CSS将这个元素定位在页面顶部的任意距离上,就必须使用padding-top ,这样元素仍然位于窗口的顶部,但是看起来显然是位于距离观察口顶部一定距离处,例如:

 <a href="#link1">Link one</a> <a href="#link2">Link two</a> <div id="link1"> The first. </div> <div id="link2"> The second. </div> 

CSS:

 div { /* just to force height, and window-scrolling to get to the elements. Irrelevant to the demo, really */ margin-top: 1000px; height: 1000px; } #link2 { /* places the contents of the element 100px from the top of the view-port */ padding-top: 100px; } 

JS小提琴演示 。

要使用普通的JavaScript方法:

 function addMargin() { window.scrollTo(0, window.pageYOffset - 100); } window.addEventListener('hashchange', addMargin); 

JS小提琴演示 。

这将无需jQuery和页面加载。

 (function() { if (document.location.hash) { setTimeout(function() { window.scrollTo(window.scrollX, window.scrollY - 100); }, 10); } })(); 

如果使用明确的锚名称,

 <a name="sectionLink"></a> <h1>Section<h1> 

然后在CSS中,你可以简单地设置

 A[name] { padding-top:100px; } 

只要您的HREF定位标记不指定NAME属性,这将工作

埃里克的回答很好,但你真的不需要那个超时。 如果你使用jQuery,你可以等待页面加载。 所以我build议改变代码:

 // The function actually applying the offset function offsetAnchor() { if (location.hash.length !== 0) { window.scrollTo(window.scrollX, window.scrollY - 100); } } // This will capture hash changes while on the page $(window).on("hashchange", function () { offsetAnchor(); }); // Let the page finish loading. $(document).ready(function() { offsetAnchor(); }); 

这也使我们摆脱了这个任意的因素。

这应该工作:

  $(document).ready(function () { $('a').on('click', function (e) { // e.preventDefault(); var target = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top-49 }, 900, 'swing', function () { }); console.log(window.location); return false; }); }); 

只要将.top-49更改为适合您的链接的链接即可。

最简单的解决scheme:

CSS

 #link { top:-120px; /* -(some pixels above) */ position:relative; z-index:5; } 

HTML

 <body> <a href="#link">Link</a> <div> <div id="link"></div> /*this div should placed inside a target div in the page*/ text text text <div> </body> 

我知道这有点晚,但是如果您使用Bootstrap的Scrollspy,我发现了一些非常重要的代码。 ( http://getbootstrap.com/javascript/#scrollspy

这让我疯狂了好几个小时。

滚动间谍的偏移量必须匹配window.scrollY,否则你将冒风险:

  1. 滚动时出现奇怪的闪烁效果
  2. 你会发现,当你点击锚点时,你会在那一段落下,但是滚动间谍会认为你是上面的一段。
  var body = $('body'); body.scrollspy({ 'target': '#nav', 'offset': 100 //this must match the window.scrollY below or you'll have a bad time mmkay }); $(window).on("hashchange", function () { window.scrollTo(window.scrollX, window.scrollY - 100); }); 
 <a href="#anchor">Click me!</a> <div style="margin-top: -100px; padding-top: 100px;" id="anchor"></div> <p>I should be 100px below where I currently am!</p>