使锚点链接转到它所链接的上面的一些像素
我不确定询问/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，否则你将冒风险：
- 滚动时出现奇怪的闪烁效果
- 你会发现，当你点击锚点时，你会在那一段落下，但是滚动间谍会认为你是上面的一段。
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>
