Question

我目前正在尝试使导航栏（固定在屏幕顶部）更好地工作。当前，如果您按下导航栏中的链接，它将转到带有以下代码的特定部分：

def find(filename, key):
    f = open('numbers.txt', 'r')
    for row in f:
        if not row.strip():
            continue
        key, value = row.split(',', 1)
        if gig == key:
            return value[:-1]

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

当我取出animate（）中的“-35”部分时，它不会向下移动并平稳运行，但是我需要“-35”部分来抵消导航栏，否则每次都会覆盖内容。是什么导致这种跳跃/移动？有什么建议或信息会有所帮助吗？谢谢！

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

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

更新：我通过阅读有关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');
});

滚动到特定部分，先平滑，然后在屏幕上跳转/下移

1 个答案: