두 번째 클릭시 JQuery 부드러운 스크롤 오작동

Question

div에있는 a 요소 인 페이지가 position: fixed입니다. 이 a 요소를 클릭하면 해당 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, 가기 창 스크롤을 클릭,하지만 그래서

B.

에 앵커 A에서 오프셋 명백한와 때 'Bluefields'링크를 클릭하고 Bluefields 섹션에 도달했다고 가정하면 500px는 Greenfields 섹션입니다. 이제 Bluefields 섹션을 보면서 "Greenfields"링크를 클릭하면 창은 맨 위로 스크롤되지만 상단에서 500px 오프셋이됩니다.

나를 미치게 만들면 답을 찾기가 필사적입니다.

다음

, 나는 페이지를 아래로 스크롤하고 있기 때문에 나는 약

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

Answer 1

을 이야기하고 정확하게 동작을 복제하는 그것을 위해 JSFiddle를 제공 ​​한, 당신은 페이지의 scrollTop 위치를 포함해야

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

(demo)

는 또한 누군가가 빠르게 링크를 클릭하면 애니메이션을 중지하려면 .stop() 포함되어 있습니다.