javascript - 导航点击页面滚动的限制区域

Question

当单击导航选项卡中的菜单时，我使用以下 jquery 代码滚动到特定部分。您现在一定已经猜到它是一个单页网站。更进一步，问题是当单击菜单时，它会滚动到该特定的 DIV 部分，但标题隐藏在菜单的 div 后面。我的意思是它向上滚动太多了。我想限制滚动级别。假设它应该比现在实际到达停止点之前停止 200px。是否可以？

这是我的代码

$(document).ready(function() {
    $('body').find('a').click(function(){
      var $href = $(this).attr('href');
      var $anchor = $($href).offset();
      var $li = $(this).parent('li');
      $li.addClass('active');
      $li.siblings().removeClass('active');
      $('body,html').animate({ scrollTop: $anchor.top }, 1000);
      return false;
    });
});

Answer 1

与其对 header 值进行硬编码，更好的方法是动态获取 header 的高度，这样它就不会在移动设备和其他设备上产生问题。

 $(document).ready(function() {
        $('body').find('a').click(function(){
          var $heightEx = $('.navbar').height(); // use your respective selector
          var $href = $(this).attr('href');
          var $anchor = $($href).offset();
          var $li = $(this).parent('li');
          $li.addClass('active');
          $li.siblings().removeClass('active');
          $('body,html').animate({ scrollTop: ($anchor.top - $heightEx)  }, 1000);
          return false;
        });
    });

编辑
这是我个人使用的代码

$("a").on('click', function(event) {
$heightEx = $('header').height(); 
if (this.hash !== "") {
  event.preventDefault();
  var hash = this.hash;
  $('html, body').animate({
    scrollTop: ($(hash).offset().top - $heightEx)
  }, 800);
} 

});