Question

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

设置很简单，就像这样：

<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时，窗口会滚动到顶部，但是从锚A到B的明显偏移。

所以，假设我点击了“Bluefields”链接并进入了Bluefields部分，并且下方500px是Greenfields部分。现在，当我在查看Bluefields部分时单击“Greenfields”链接时，窗口会向后滚动到顶部，但距离顶部有500px的偏移。

我迫切希望找到答案，因为它让我疯了。

在这里，我为它提供了一个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平滑滚动行为不端

1 个答案: