2014-12-30 4 views
3

그래서 나는 다음과 같은 코드를 가지고 스크롤하지 : I에 유래에서 가져온 코드의 도움으로 구축 한jQuery를 .scrollTop 제대로

$(document).ready(function(){ 
    if(window.location.hash) { 
    $('body,html').animate({ 
     scrollTop: $(window.location.hash).offset().top 
    }, 1000); 

    } 
}) 

합니다. 페이지를 url#destination이라고 부르므로 ID가 페이지 해시 인 요소로 스크롤해야합니다. 요소가 존재하고 페이지가 아래로 스크롤되지만 정확한 요소 오프셋이 아닌 위의 비트가 스크롤됩니다. 괜찮을 수도 있지만 예상대로 작동하길 원합니다.

>>>$("body").scrollTop() 
>1155 

>>>$("#aboutus").offset().top 
>1672.890625 

누군가가 나에게 이것을 설명 할 수 :
그래서 나는 지금 당신에게 콘솔 결과를 보여? 왜냐하면 여기서 아무것도 이해할 수 없기 때문이죠.

+0

그것은 나를 위해 잘 작동합니다. 공백 페이지를 만들려고합니다. 아무 것도없고 jquery와 3 개의 div, 큰 높이의 첫 번째와 세 번째 페이지를 만들고 두 번째 페이지로 스크롤하려고 시도합니다. – vaso123

답변

3

음 ... 나를 잘 작동합니다. 어쩌면 문제는 사용자가 주석에서 지적한대로 요소가 아직로드되지 않았으므로 $(window).load()을 사용해야합니다. 그러나 브라우저를 사용하면 URL에 해시가있을 때 id가 해시 인 요소가있는 곳이면 어디든 직접 이동한다는 기본 제공 방법이 있기 때문에 코드가 제대로 작동하지 않습니다. 이 동작은 자바 스크립트 코드에서 .load 이벤트가 검색되기 전에 트리거되기 때문에 발생합니다.

$(window).on("load", function(){ 
    if(window.location.hash) { 
    setTimeout(function(){ 
     $('body,html').animate({ 
     scrollTop: $('*[idt="'+(window.location.hash).replace("#", "")+'"]').offset().top 
     }, 1000); 
    }, 130) 


    } 
}) 

이 같은 해시를 가지고 어떤 요소가 없기 때문에 애니메이션이 제대로 작동 완벽하게 확인해야한다 : 당신이 코드가 작동하는지 확인하고 싶은 경우에 따라서, 같은 다른 속성을 가진 요소의 대상을 대체 , js 코드는 같은 방식으로 관리합니다.

+0

완벽! 감사! 그게 완벽하게 작동합니다. – qaztype

+0

그럼에도 불구하고, 나는 이것을 할 수있는 더 좋은 방법이 있다고 확신합니다. –