JQuery гладкая прокрутка misbehaves при втором нажатии

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, он снова прокручивает вернуться к началу.

Более того, что, когда я нажимаю на якорь и попасть в нужное положение, а затем я нажимаю якорь B, окно прокручивается в верхней части, но с очевидным смещением от анкерной А до В.

Так скажем, я нажал на ссылку «Bluefields» и попал в раздел Bluefields, а 500 пикселей ниже - раздел Greenfields. Теперь, когда я нажимаю ссылку «Зеленые поля» при просмотре раздела Bluefields, окно прокручивается назад, но имеет смещение на 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() остановить анимацию, если кто-то быстро кликает по ссылкам.