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

Question

我有以下问题:

就像在 Facebook 上一样，我在页面顶部有一个始终可见的菜单栏 (position: fixed;)。当我现在点击我页面上的散列链接(或加载一个新的 url 中有散列的页面)以跳转到页面上的某个元素时，浏览器总是将该元素滚动到页面的最顶部，这意味着元素位于顶部菜单栏后面。

我想添加一些 Javascript(jQuery 或普通 Javascript)，它会自动向该滚动位置添加(负)偏移量，以便链接元素位于顶部菜单栏的右下方 单击链接或加载页面时。但我不只是想将事件监听器添加到处理此问题的所有链接。我还想要一个有效的解决方案，如果页面使用浏览器的地址栏加载了 url 中的散列部分(或者当链接到 url 末尾带有散列的不同页面时)。

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

Answer 1

实际上我自己找到了一个只使用 css 的解决方案:

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

唯一的问题:如果这个元素在 float 元素之后，负边距不起作用(意味着正填充变得可见)。如果有人知道解决方案/解决方法，请发表评论。那我会更新我的帖子。谢谢!