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

问题描述

| 我只是在学习javascript（从字面上看），所以我有一点JS（在下面），它使页面定位点从页面顶部向下移动了90个像素，以防止定位点的内容被固定点覆盖顶部元素。在同一页面上单击指向锚点的链接时，它可以很好地工作。 我遇到的问题是，当我单击指向另一个页面上的锚点的链接时。加载新页面时，锚点将加载到页面顶部，并且部分隐藏在固定top元素下方。 我怀疑我在检查锚点散列的每个页面上都需要某种onLoad事件，但是对此我太陌生了。 任何帮助表示赞赏，谢谢！ 统计信息：我正在为公司的网络帮助进行此操作。我们有约280多个帮助页面和2500个锚点。我希望将一些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;
      }
    }
  });
});

    

解决方法

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

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

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

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

    ,        我实际上使用一些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;
}