2012-06-20 4 views
7

내가이 링크에서 jQuery 코드를 얻을 때까지 : 당신은 그냥 HTML 파일의 맨 처음에 일부 참조 요소를 사용하지 않는 이유는 How to scroll to top of page with JavaScript/jQuery?스크롤 (페이지 끝) 페이지로드

, 다음과 같은

<div id="top"></div> 

하고, 페이지가로드, 간단하게 할

이 기능 화재 후 브라우저 스크롤, 당신은 단순히 지금
$(window).load(function(){ 

    top.location.href = '#top'; 

}); 

이 모든 것이 아니라 구글 크롬에서 작동 할 경우
$(document).ready(function(){ 

    top.location.href = '#top'; 

}); 

! Google 크롬에이 코드를 어떻게 고칠 수 있습니까? 어떻게이 코드에 애니메이션을 추가 할 수 있습니까? 스크롤 속도 또는 빠른 속도, 느린 속도 등 ...

답변

17

jQuery를 사용하는 경우 scrollTop을 사용하여 스크롤 할 수 있습니다. 그것은 방법이지만, 그것은 또한 움직일 수 있습니다. jQuery API Documentation for scrollTop

당신은 너무처럼 사용할 수 있습니다 :

$("html,body").scrollTop(0); 

또는 애니메이션에 대한 :

$(document).ready(function() 
{ 
    $("html,body").animate({scrollTop: 0}, 1000); 
} 
:

$("html,body").animate({scrollTop: 0}, 1000); 

당신은 어떤 이벤트 처리기에서이를 설정할 수 있습니다 여기에 문서입니다

또는

$(window).load(function() 
{ 
    $("html,body").animate({scrollTop: 0}, 1000); 
} 
+0

HTML 태그와 body 태그를 타겟팅하면 Chrome에서 정상적으로 작동합니다. – lewiguez

+0

감사합니다. 이제이 코드에 속도 나 애니메이션을 어떻게 추가 할 수 있습니까? top.location.href = '#top'; – Alireza

+0

당신은 내가 생각할 수있는 한 멀리 갈 수 없습니다. 스칼라 속성을 애니메이션으로 설정할 수 없습니다. 기본적으로 애니메이션은 값을 증가시키는 루프 일뿐입니다. 이것은 단순히 값을 증가시킬 수없는 값으로 설정하는 것입니다. 이제 #top 요소의 세로 위치를 찾고 해당 세로 위치로 scrollTop 할 수 있습니다. 애니메이션 코드에서 scrollTop을 0으로 설정하지 않고 수직 위치 값으로 설정하면됩니다. – lewiguez

0

(나는 당신의 방법은 구글 크롬에서 작동하지 않았다 왜 있는지 여전히 응답 lewiguez 실제로 준 것이 좋지만 것입니다.)

나를 위해 일하게 될 것으로 보인다

, 잘 모르겠어요 창로드에 관해서. 나는 실제 "top.location.href"라인을 클릭했지만 링크를 테스트했다.

$('#bottomlink').click(function(){ 
    top.location.href="#top"; 
    return false; 
}); 

이것은 페이지의 맨 위에 있습니다.

<p id="top">lorem ipsum</p> 

그리고 페이지 하단의 링크입니다.

<a id="bottomlink" href="#">Bottom Link</a> 
+0

는 내가 페이지 로딩 후 aotomatic 스크롤이 필요 없습니다. 첫 번째 게시물에서 해당 코드를 wroking 아니지만 크롬에서. 나는이 같은 링크 앵커 또는 뭔가를해야만 필요 없어요. 난. 내가 가지고 페이지로드 후 aotomatic 고정 스크롤해야 할 것이 아니라 내 문제는 크롬! – Alireza

+0

구글 당신이 크롬에 오류에 대한 콘솔을 확인해 봤어 ?, 지금은 모든 –

+0

좋아, 내가 body 태그에 ID = "최고"를 넣어 노력하고 지금은이 코드 top.location.href = '#top'에 대한 속도 나 애니메이션을 추가 할 수있는 방법에 대해 설명합니다.; – Alireza