javascript - 滚动到特定部分，一开始很平滑，但随后会跳/移到屏幕下方

Question

我目前正在尝试让我的导航栏(固定在屏幕顶部)更好地工作。目前，如果您在导航栏中按下一个链接，它将转到带有以下代码的特定部分:

   $('a[href^="#"]').bind('click.smoothscroll',function (e) {
       e.preventDefault();

       var target = this.hash,
           $target = $(target);

       $('html, body').animate({
           'scrollTop': $target.offset().top - 45
       }, 400, 'swing', function () {
           window.location.hash = target;
       });
   });
  });

但是，它将转到该部分，然后在屏幕上向下移动并覆盖内容。但如果我再次按下同一部分，它就会到达正确的位置。我需要它在第一次点击时到达正确的位置。

当我在 animate() 中取出“- 35”部分时，它不会向下移动并顺利移动，但我需要“- 35”部分来抵消导航栏，否则它每次都会覆盖内容.是什么导致了这种跳跃/转移？有什么有用的建议或信息吗？谢谢!

注意:我也有这段代码，但我不确定它是否是问题的一部分:

$(document).ready(function(){
   var offset = $(".navbar").offset().top;
   $(window).scroll(function() {
         if ($(window).scrollTop() >= offset) {
             $('.navbar').addClass('navbar-fixed');
         }
    });

更新:我通过阅读更多关于 jQuery 动画的细节来解决我的问题。我使用的参数“complete”(动画完成后调用的函数，每个匹配元素调用一次)不是必需的，因此我将其从我的代码中删除。

Answer 1

您需要避免在动画完成后设置哈希。当您为动画使用偏移量(-45)时，动画将平滑地运行到给定的坐标，然后当您设置 location.hash(在动画之后完成了)。解决方案是从位置中删除散列(preventDefault() 就是这样做的)，并且在动画完成后不要再次设置它。

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);
    $('html, body').animate({
        'scrollTop': $target.offset().top - 45
    }, 400, 'swing');
});