JQuery 平滑滚动在第二次点击时出现异常

Question

我有一个页面，其中一些 a 元素位于 div 中，即 position: fixed。单击这些 a 元素，我希望 windows 平滑地滚动到另一个具有相应 name 属性的 a 元素。

设置非常简单，如下所示：

<a href="#bluefield"><img src="someimage.png"></a> <!--anchor tag to click -->
<a name="bluefield"></a>

我把它作为 jQuery 脚本运行:

$('a').click(function(){
$('html, body').animate({
    scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);
return false;

});

现在，代码可以运行，并且可以平滑滚动，但是每当我单击锚点 A 时，它就会向下滚动到具有相应 name 属性的右侧锚点标记，一旦我单击它锚点 A 再次滚动回到顶部。

更重要的是，当我单击锚点 A 并到达正确位置，然后单击锚点 B 时，window 滚动到顶部，但从锚点 A 到 B 有明显的偏移。

假设我点击了 "Bluefields" link 并进入了 Bluefields 部分，下方 500px 是 Greenfields 部分。现在，当我在查看 Bluefields 部分时单击 "Greenfields" link 时，window 会滚动回顶部，但与顶部有 500 像素的偏移量。

我很想找到这个问题的答案，因为它快把我逼疯了。

在这里，我为其提供了一个 JSFiddle，它完全复制了我正在谈论的行为

https://jsfiddle.net/worldwarotter/es6trw97/

Answer 1

因为页面是向下滚动的，所以需要包含页面的scrollTop位置(demo)

$('a').click(function() {
  $('html , body').stop().animate({
    scrollTop: $('[name="' + this.hash.substr(1) + '"]').offset().top + $(window).scrollTop()
  }, 500);
  return false;
});

我还添加了一个 .stop() 来在有人快速点击链接时停止动画。

JQuery 平滑滚动在第二次点击时出现异常

JQuery smooth scrolling misbehaves on second click

html

javascript

jquery

scrolltop

jquery-animate