固定链接位于粘性 header 后面的页面顶部。 如何设置平滑滚动 JS 在滚动时始终保持 75px 的上边距？

Question

我在我的 Joomla 站点上使用 joomshaper 模板。 当我单击指向某个部分的锚链接时，它会打开位于棒 header 后面的页面顶部的部分。 我尝试了以下方法，但它不起作用：

#aboutus:before {
    content: '';
    display: block; 
    position: relative; 
    width: 0; 
    height: 75px; 
    margin-top: -75px;
}

我还尝试将 class 设置为我与下面的 css 的链接，但没有成功：

a.anchor {
    display: block;
    position: relative;
    top: 75px;
    visibility: hidden;
}

我想知道这是否可以通过修改我当前的 JS 来实现平滑滚动，以便在滚动时留下 75px 的上边距。 我的JS如下：

<!-- SMOOTH SCROLL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
  $('a[href*=#]:not([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) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>
<!-- End of SMOOTH SCROLL -->

帮助请。

Answer 1

未经测试，但尝试类似

scrollTop: target.offset().top+70

滚动顶部停止在页面顶部。 您需要添加到偏移量以将其向下移动。

完整代码

<!-- SMOOTH SCROLL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
  $('a[href*=#]:not([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) {
        $('html,body').animate({
          scrollTop: target.offset().top+70
        }, 1000);
        return false;
      }
    }
  });
});
</script>
<!-- End of SMOOTH SCROLL -->