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()停止動畫如果有人鏈接迅速點擊。