0

这是我正在开发的网站：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 页面上才能正常工作。从另一个页面单击导航中的锚点时，我仍然无法使其工作。

4

1 回答 1

0

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

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

您也可以取消设置 id（浏览器找不到滚动的位置）并手动滚动，但之后您需要重置 id，如果您不使用超时，则没有 after

编辑 ：

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

<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>
于 2012-09-17T23:33:53.427 回答