为所有哈希链接/调用的滚动位置添加自动偏移量
我有以下问题：
就像在Facebook上一样，我在页面顶部有一个始终可见的菜单栏（ position: fixed; ）。 当我现在单击我的页面上的哈希链接（或在URL中加载带有哈希的新页面）跳转到页面上的某个元素时，浏览器总是将此元素滚动到页面的最顶部，这意味着之后，元素位于顶部菜单栏的后面。
我想添加一些Javascript（jQuery或普通Javascript），自动为此滚动位置添加（负）偏移量，以便在单击链接或加载页面时链接元素位于顶部菜单栏的正下方 。 但我不只是想将事件监听器添加到所有处理这个问题的链接。 我还想要一个有效的解决方案，如果页面使用浏览器的地址栏在URL中加载了哈希部分（或者链接到url末尾带有哈希的不同页面）。
您可以在http://loud.fm/tmp/details.html找到我的页面的clickdummy。 单击左侧图像右上角的评论气泡跳转到评论。 如果您的浏览器窗口足够小，则应在列出注释之前跳转到灰色的“COMMENTS”标题和分页。 在点击跳转链接后，我希望标题和分页显示在顶部菜单的正下方 。
你能帮我解决这个问题吗？ 提前致谢！ 🙂
此致，René
我实际上找到了一个适用于我的解决方案，仅使用css：
我添加了一个margin-top: -40px; 和padding-top: 40px; 到跳转链接所指向的元素。 这适用于所有主流浏览器：IE（7-9），Firefox，Opera，Chrome和Safari。
唯一的问题：如果此元素位于浮动元素之后，则负边距不起作用（意味着正填充变为可见）。 如果有人知道解决方案/解决方法，请发表评论。 我会更新我的post。 谢谢！
为了添加解决方案，我发现将显示设置为none解决了在浮动元素中使用时填充可见的问题。
所以：
.symbol-target { padding-top: 40px; margin-top: -40px; width: 1px; /* '0' will not work for Opera */ display: hidden; }
我还将此样式作为空目标包含在我的目标内容之上。
作为一个例子，考虑D的bootDoc解决方案适用于所有主流浏览器：
CSS（插入标题栏高度而不是40px ）：
.symbol-target { padding-top: 40px; margin-top: -40px; width: 1px; /* '0' will not work for Opera */ display: inline-block; }
HTML：
My text
真实页面示例：
使用bootDoc std.array.uninitializedArray文档
注意：
它不适用于IE 6。
我发现这种添加方式:before在css :before似乎运行良好。
h2:before { display: block; content: " "; margin-top: -285px; height: 285px; visibility: hidden; }
更多CSS Tricks网站
对我来说最有效的方法是这样做：
- 将指定的ID（URL中所需的ID）提供给所需元素中的其他元素。
- 使新元素绝对并将其移动到所需元素上方X像素，其中X是固定标题的高度。
不幸的是（至少使用Firefox）padding和margin都没有帮助（将它们放在包含除菜单栏之外的所有内容的’main’div）; 滚动到一个锚总是把它放在页面的最顶部，固定的元素被诅咒。
我认为你将不得不采用你最初的想法，但请记住，通过使用委托，你可以设置一个处理程序，它将与你的菜单栏中的所有链接一起使用，包括动态添加的链接。
尝试在页面顶部放置填充以占据菜单栏后面的区域。 像： padding-top:80px; （而不是80px你应该把你的菜单栏的高度）。
使用纯JavaScript您可以执行以下操作。 它将监听所有锚标记的click事件并滚动到页面中的所需位置（它使用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);
上面的代码将处理所有的技巧。