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（浏览器找不到滚动的位置）并滚动manualy，但你需要重置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>

锚点不在某些页面上工作

1 个答案: