JQuery平滑滚动的第二次点击行为不当

Question

我有一个页面，其中一些a元素是在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，它会滚动回到顶部。

更重要的是，当我点击锚泊，并获得了合适的位置，然后我点击锚B，窗口滚动到顶部，但有明显的锚A偏移到B

所以假设我点击了“Bluefields”链接并进入Bluefields部分，并且在Greenfields部分下方500px处。现在，当我在查看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()停止动画如果有人链接迅速点击。