为所有哈希链接/调用的滚动位置添加自动偏移量

Question

我有以下问题:

就像在Facebook上一样,我在页面顶部有一个始终可见的菜单栏(position: fixed;).当我现在点击我的页面上的哈希链接(或在网址中加载带有哈希的新页面)跳转到页面上的某个元素时,浏览器总是将此元素滚动到页面的最顶部,这意味着之后,元素位于顶部菜单栏的后面.

我想添加一些Javascript(jQuery或普通的Javascript),它会自动为这个滚动位置添加一个(负)偏移量,这样当点击一个链接或加载页面时,链接的元素就位于顶部菜单栏的正下方.但我不只是想将事件监听器添加到所有处理这个问题的链接.我还想要一个有效的解决方案,如果页面使用浏览器的地址栏在网址中加载了哈希部分(或者链接到网址末尾带有哈希的不同页面).

您可以在http://loud.fm/tmp/details.html找到我的页面的clickdummy .单击左侧图像右上角的评论气泡跳转到评论.如果您的浏览器窗口足够小,则应在列出注释之前跳转到灰色的"COMMENTS"标题和分页.在点击跳转链接后,我希望标题和分页显示在顶部菜单的正下方.

你能帮我解决这个问题吗？提前致谢!:)

此致,René

Answer 1

如今在 2021 年，有一个很好的简单的 only-css 解决方案，其中包含:target和scroll-margin-top

:target {
    scroll-margin-top: 100px;
}

它适用于所有主要浏览器

参考：

• https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top
• https://developer.mozilla.org/en-US/docs/Web/CSS/%3Atarget

Answer 2

我实际上找到了一个适用于我的解决方案,仅使用css:

我添加了一个margin-top: -40px;和padding-top: 40px;跳转链接所指向的元素.这适用于所有主流浏览器:IE(7-9),Firefox,Opera,Chrome和Safari.

唯一的问题:如果此元素位于浮动元素之后,则负边距不起作用(意味着正填充变为可见).如果有人知道解决方案/解决方法,请发表评论.我会更新我的帖子.谢谢!

Answer 3

我发现这种:before在 css中添加 a的方法似乎很有效。

h2:before { 
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}

更多内容请访问CSS Tricks 网站