2011-11-29 6 views
2

나는 Parallax 스크롤을 that nike site과 같이 놀고있다. 그래서 나는 페이지에서 사용자의 수직 위치를 결정하기 위해 scrollTop을 사용하고 그 값의 변화에 ​​따라 요소의 위치를 ​​조정했습니다.animate하기 전에 왜 scrollTop이 애니메이션으로 이동합니까?

여기 나는 scrollTop 값을 반올림하여 기록합니다. 나중에 로그를 보여 드리겠습니다.

var distance = 60*(Math.round($(window).scrollTop()/60)); 
console.log(distance); 

그런 다음 클릭 할 때이 함수를 호출하여 전달한 scrollTop 값으로 스크롤합니다.

function goTo(n){ 
    console.log('begin animating'); 
    $('html,body').animate({scrollTop: n},2000); 
} 

여기에 문제가 있습니다. 스크롤 가기 값이 애니메이션으로 바뀌기 전에 0으로 점프됩니다.

그래서 페이지 아래 중간에있을거야 그리고 기록합니다

begin animating 
0 
6240 
6180 
6120 
// etc... 

내가 물건을 배치하고있어 방법은 scrollTop 값의 정확도에 의존한다. 그래서 내 질문은 다음과 같습니다.

애니메이션을 끝내기 전에 scrollTop 값이 0으로 점프하지 않게하려면 어떻게해야합니까?

더 많은 정보가 필요하면 알려주세요. Heres는
사이트의 라이브 버전 : http://theblueeyeguy.com/moon/Illumination/

('다음'을 클릭 한 후 '이전'이 그것을 휴식하는) 당신이 href="#"와 링크를 사용하고 아마 때문에

답변

7

합니다.

onclick 속성에 return false;을 추가하십시오.

<a href="#" onClick="goTo(2160);return false;">< Prev | </a> 
+1

그게 전부 야! 굉장한 소스! –