滚动到带有固定标题的锚点，隐藏在标题后面的内容，边距和顶部填充不起作用答案

【问题标题】：Scroll to anchor with fixed header, content hidden behind header, margin and top padding not working滚动到带有固定标题的锚点，隐藏在标题后面的内容，边距和顶部填充不起作用
【发布时间】：2011-06-17 16:17:01
【问题描述】：

我正在使用 smoothscroll.js 浏览我的网站。它在 Firefox 中停在正确的锚点上，但在 Chrome 中，它会在第一次单击链接时通过该点，并将内容推到顶部，将内容隐藏在页面后面。然后，如果您再次单击它，它会正确对齐。我在其他网站上也看到了这些问题。好奇看看其他人有没有同样的问题。 Chrome 似乎忽略了任何顶部填充或边距或定位（例如：top:20%;）。

【问题讨论】：

标签： javascript header scroll anchor fixed

【解决方案1】：

已解决：http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/#method-D

有几种方法可用。

【讨论】：

我无法理解这些方法中的#target 与的关系。我正在尝试 - 就像在演示中一样 - 但没有成功。有什么建议吗？
Nicolas Gallagher 的方法与 stackoverflow.com/a/13184714/109618 相比有点复杂，stackoverflow.com/a/13184714/109618 只涉及这个 HTML 和这个 CSS： .anchor{显示：块；位置：相对；顶部：-50 像素；可见性：隐藏；}
我也认为，在我尝试了几种方法之后，隐藏的是一个非常简单和好的解决方案。它使您可以很好地控制链接元素的位置，而不会破坏您可以根据需要使用边距和填充的正常布局。谢谢大卫詹姆斯

【解决方案2】：

这可能是由于使用标题 html5 元素的新 wordpress 主题。我将标题更改为 div，效果很好。

【讨论】：

【解决方案3】：

我使用Local Scroll (JQuery) 来执行此操作。

它允许你做一个顶部偏移

$.localScroll({
    offset: -100
});

【讨论】：