锚在某些页面上不起作用

Question

这是我正在工作的网站：http://defend-foreclosure.com

如果你去http://defend-foreclosure.com/law.html并点击导航中的下拉链接"法律"，你会看到锚完美工作。它将每个部分的标题隐藏在标题后面，但我通过将以下脚本添加到我的html文件中解决了这个问题。

<script>
$().ready(function(){
// Fixing Anchor links nav leaving the destination text hidden under Header    
$(window).hashchange(function() {
var hash = "#" + location.hash.replace(/[^A-Za-z0-9_-]/g, "");
if (hash && $(hash).offset()) {
var pos = $(hash).offset().top - 55;
$(window).scrollTop(pos);
}
});
});
</script>

当我试图从law.html以外的任何页面导航到其中一个锚点时，就会出现这个问题。我认为这与脚本只在.haschange上工作有关，而不是通用的。

如果你回到家、关于或联系，并尝试点击下拉列表中的一个锚，你会注意到它仍然会切断导航下部分的标题。有人知道我如何在所有页面上都能正常工作吗？

编辑：

如果我在.haschange之外添加以下代码，然后添加一个警报，它会正常工作，发出警报，然后一旦我单击"确定"，它就会出错并再次隐藏标题。

<script>
var hash = "#" + location.hash.replace(/[^A-Za-z0-9_-]/g, "");
      if (hash && $(hash).offset()) {
        var pos = $(hash).offset().top - 55;
        $(window).scrollTop(pos);
      }
</script>

编辑：我在我的law.html页面上将脚本缩小到以下3行。

<script>
var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);
</script>

这使得该函数只有在law.html页面上才能正常工作。当从另一个页面点击导航中的锚时，我仍然无法使其工作。

Answer 1

这并不漂亮，但chrome似乎在页面加载事件后触发了它的页面定位。所以我找到的唯一方法是使用超时

<script>
$(function(){
setTimeout(function(){
var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);
},10);
})
</script>

你也可以取消设置id(浏览器找不到滚动的位置)并手动滚动，但你需要在之后重置id，如果你不使用超时，就没有之后

编辑：

为了能够将此功能与其他事件一起使用，您需要绝对滚动，因为在某些浏览器中，事件流并不完全相同，可能会触发两次：

<script>
$(function(){
setTimeout(function(){
var shiftWindow = function() { 
var hash = "#" + location.hash.replace(/[^A-Za-z0-9_-]/g, "");
if (hash && $(hash).offset()) {
var pos = $(hash).offset().top - 55;
$(window).scrollTop(pos);
}
};
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);
},10);
})
</script>