时间戳

首页 > 解决方案 > 滚动到特定部分，起初平滑，但随后跳转/向下移动屏幕

javascript - 滚动到特定部分，起初平滑，但随后跳转/向下移动屏幕

问题描述

我目前正在尝试让我的导航栏（固定在屏幕顶部）更好地工作。目前，如果您点击导航栏中的链接，它将使用以下代码转到某个部分：

   $('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 动画的细节来解决我的问题。我使用的参数“完成”（动画完成后调用的函数，每个匹配元素调用一次）不是必需的，所以我从代码中删除了它。

标签： javascriptjqueryhtmlcssanimation

解决方案

您需要避免在动画完成后设置哈希。当您为动画使用偏移量（-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');
});

推荐阅读