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

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

 $(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);
}

}）;

Answer 2

也许，您需要更改“动画” scrollTop参数：

 $('body,html').animate({ scrollTop: $anchor.top - 200px }, 1000);

导航时页面滚动的限制区域单击

2 个答案: