新页面上的 JavaScript 加载将锚点移动到顶部固定元素下方

Question

我刚刚学习 javascript（字面意思），我有一些 JS（如下），可以将页面锚点从页面顶部向下移动 90 像素，以防止锚点的内容被固定的顶部元素重叠。当单击同一页面上的锚点链接时，效果非常好。

我遇到的问题是当我单击指向不同页面上的锚点的链接时。当新页面加载时，锚点会加载到页面顶部，并部分隐藏在固定顶部元素下方。

我怀疑我需要在每个页面上执行某种 onLoad 事件来检查锚点哈希，但我对此太陌生，无法弄清楚。

任何帮助表示赞赏，谢谢！

统计信息：我这样做是为了我公司的网络帮助。我们有大约 280 多个帮助页面和 2,500 个左右的锚点。我希望在包含或标头中添加一些 JS 能够解决我的问题。

注意：我使用的脚本是作为另一个 stackoverflow 问题的答案找到的，并进行了轻微修改。

$(function(){
  $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname) {
      var $target = (this.hash);
      $target = target.length && target || ('[name=' + this.hash.slice(1) + ']');
      if ($target.length) {
        var targetOffset = target.offset().top - 90;
        $('html,body').animate({scrollTop: targetOffset}, 1000);
        return false;
      }
    }
  });
});

Answer 1

这应该工作得很好。在 Firefox 和 Chrome 中测试。

$(function(){
  if(location.hash !== "") {
    window.scrollTo(0,window.pageYOffset-90);
  }
});

Answer 2

如果我理解正确的话；您希望此移动在页面加载时发生，而不仅仅是在单击链接时发生。如果是这种情况，您将需要使用each() 函数而不是click()。只需将 .click 替换为 .each ，页面加载后就会发生。另外，为了安全起见，请将 href 匹配项用双引号引起来。

  $('a[href*="#"]').each(function() {...

Answer 3

我实际上用一些 CSS 解决了这个问题（我向所有锚点添加了一个类）：

a.target
{
    position: relative;
    border-top: 90px solid transparent;
    background-clip: padding-box;
    margin: -100px 0 0;
}

a.target:before
{
    content: "";
    position: absolute;
    top: -90px;
    left: 0;
    right: 0;
    border-top: 2px solid #ccc;
}