javascript 为所有哈希链接/调用的滚动位置添加自动偏移量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11386807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding an automatic offset to the scroll position for all hash-links/calls
提问by René Schubert
I have the following problem:
我有以下问题：
Like on Facebook, I have a menu bar at the top of the page that is always visible (position: fixed;). When I now click hash-links on my page (or load a new page with a hash in the url) to jump to a certain element on the page, the browser always scrolls this element to the very top of the page, meaning that the element is behind the top menu bar, afterwards.
就像在 Facebook 上一样，我在页面顶部有一个始终可见的菜单栏 ( position: fixed;)。当我现在单击页面上的哈希链接（或加载一个在 url 中带有哈希值的新页面）以跳转到页面上的某个元素时，浏览器总是将此元素滚动到页面的最顶部，这意味着元素在顶部菜单栏后面，然后。
I'd like to add some Javascript (jQuery or normal Javascript) that automatically adds a (negative) offset to this scroll position, so that the linked element is positioned right underthe top menu bar when a link is clicked or the page is loaded. But I don't just want to add event listeners to all links that take care of this. I also want a solution that works, if the page is loaded with a hash portion in the url using the browser's address bar (or when linking to a different page with a hash at the end of the url).
我想添加一些 Javascript（jQuery 或普通 Javascript），它会自动向此滚动位置添加（负）偏移量，以便在单击链接或加载页面时链接元素位于顶部菜单栏的正下方. 但我不只是想向所有处理此问题的链接添加事件侦听器。我还想要一个有效的解决方案，如果页面使用浏览器的地址栏在 url 中加载了哈希部分（或者当链接到在 url 末尾带有哈希的不同页面时）。
You can find a clickdummy of my page at http://loud.fm/tmp/details.html. Click on the comments-bubble on the top right of the image on the left side to jump to the comments. If your browser window is small enough, you should jump to the grey "COMMENTS" headline and pagination right before the comments are listed. I'd want the headline and pagination to be displayed right underthe top menu, after the jump link was clicked.
您可以在http://loud.fm/tmp/details.html找到我页面的 clickdummy 。点击左侧图片右上方的评论气泡可以跳转到评论。如果您的浏览器窗口足够小，您应该在评论列出之前跳转到灰色的“评论”标题和分页。在单击跳转链接后，我希望标题和分页显示在顶部菜单的正下方。
Can you help me with this, please? Thanks in advance! :)
你能帮我解决这个问题吗？提前致谢！:)
Regards, René
问候， 勒内
回答by René Schubert
I actually found a solution myself that worked for me, using only css:
实际上，我自己找到了一个对我有用的解决方案，仅使用 css：
I added a margin-top: -40px;and padding-top: 40px;to the element that the jump-link was pointing to. This works for all major browsers: IE (7-9), Firefox, Opera, Chrome and Safari.
我在跳转链接指向的元素中添加了一个margin-top: -40px;和padding-top: 40px;。这适用于所有主要浏览器：IE (7-9)、Firefox、Opera、Chrome 和 Safari。
Only problem: In case that this element is after a floated element, the negative margin doesn't work (meaning the positive padding becomes visible). Please comment, if anyone knows a solution/workaround for this. I'll update my post then. Thank you!
唯一的问题：如果这个元素在浮动元素之后，负边距不起作用（意味着正填充变得可见）。请评论，如果有人知道解决方案/解决方法。那我会更新我的帖子。谢谢！
回答by phocks
I found this way of adding a :beforein the css seems to work well.
我发现这种:before在 css中添加 a的方法似乎很有效。
h2:before {
display: block;
content: " ";
margin-top: -285px;
height: 285px;
visibility: hidden;
}
More at CSS Tricks website
更多内容请访问CSS Tricks 网站
回答by Denis
As an example consider D's bootDocsolution that works in all major browsers:
以D的bootDoc解决方案为例，该解决方案适用于所有主要浏览器：
CSS (insert your titlebar height instead of 40px):
CSS（插入标题栏高度而不是40px）：
.symbol-target {
padding-top: 40px;
margin-top: -40px;
width: 1px; /* '0' will not work for Opera */
display: inline-block;
}
HTML:
HTML：
<h3>
<span class="symbol-target" id="myTarget"> </span>
<a href="#myTarget">My text</a>
</h3>
Real page example:
真实页面示例：
std.array.uninitializedArraydocumentation using bootDoc
std.array.uninitializedArray文档使用 bootDoc
Note:
笔记：
It doesn't work for IE 6.
它不适用于 IE 6。
回答by boboshady
To add to the solution on this, I found that setting the display to none solved the issue of padding being visible when used amongst floated elements.
为了解决这个问题，我发现将 display 设置为 none 解决了在浮动元素中使用时填充可见的问题。
So:
所以：
.symbol-target {
padding-top: 40px;
margin-top: -40px;
width: 1px; /* '0' will not work for Opera */
display: hidden;
}
I also included this style as an empty div right above my target content.
我还将这种样式作为一个空 div 包含在我的目标内容正上方。
回答by Hitesh
The thing that worked best for me was to do this:
最适合我的是这样做：
- Give the designated ID (what you want in the URL) to a different element within the required element.
- Make that new element absolute and move it X pixels above the required element, where X is the height of the fixed header.
- 将指定的 ID（您在 URL 中想要的）提供给所需元素中的不同元素。
- 使新元素成为绝对元素并将其移动到所需元素上方 X 像素，其中 X 是固定标题的高度。
回答by asmmahmud
With pure javascript you can do the following. It will listen to a click event to all anchor tag and do scrolling to your desired position in the page (It is using jquery):
使用纯 javascript，您可以执行以下操作。它将监听所有锚标记的点击事件，并滚动到页面中所需的位置（它使用 jquery）：
/* go to specific position if you load the page directly from address bar */
var navbarHeight = document.getElementById('mynavbar').clientHeight;
function gotoSpecificPosition() {
if (window.location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - navbarHeight );
}
}
/* Captures click events on all anchor tag with a hash tag */
$(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);
});
window.setTimeout(offsetAnchor, 0);
The above code will handle all the tricks.
上面的代码将处理所有的技巧。
回答by ebohlman
Unfortunately (at least using Firefox) neither padding nor margin helps here (putting them on a 'main' div containing everything but the menubar); scrolling to an anchor always puts it at the very top of the page, fixed elements be damned.
不幸的是（至少使用 Firefox）填充和边距在这里都没有帮助（将它们放在包含除菜单栏之外的所有内容的“主”div 上）；滚动到一个锚点总是把它放在页面的最顶部，固定元素该死。
I think you're going to have to go with your original idea, but remember that by using delegation you can set just one handler that will work with all the links in your menubar, including ones dynamically added.
我认为您将不得不遵循您最初的想法，但请记住，通过使用委托，您可以只设置一个处理程序，该处理程序将处理菜单栏中的所有链接，包括动态添加的链接。
回答by Hymanson
Try putting a padding at the top of you page to occupy the area behind the menubar. Something like: padding-top:80px;(instead of 80px you should put the height of your menubar).
尝试在页面顶部放置填充以占据菜单栏后面的区域。像这样：（padding-top:80px;而不是 80px 你应该把你的菜单栏的高度）。
