현재 웹 페이지 스크롤 위치를 가져오고 설정하는 방법은 무엇입니까?


121

현재 웹 페이지 스크롤 위치를 가져오고 설정하려면 어떻게해야합니까?

사용자 작업 / 입력에 따라 새로 고쳐야하는 긴 형식이 있습니다. 이런 일이 발생하면 페이지가 맨 위로 재설정되어 사용자가 원래 있던 지점까지 다시 스크롤해야하기 때문에 사용자를 짜증나게합니다.

페이지가 다시로드되기 전에 현재 스크롤 위치 (숨겨진 입력)를 캡처 할 수 있다면 다시로드 한 후 다시 설정할 수 있습니다.


AJAX 기반 형식이 이러한 효과를 방지하는 더 좋은 방법이 아닌가? (물론 XHR을 사용할 수없는 경우에 대비책을 제공) 페이지를 다시로드하면 페이지가 맨 위로 이동했다가 다시 뒤로 이동하게되는데 이는 성가 시게 할 수 있습니다.
Marcel Korpel 2010

답변:


118

당신은 document.documentElement.scrollTop부동산을 찾고 있습니다.


덕분에, 나는이 발견 : articles.sitepoint.com/article/javascript-from-scratch/6 과 수정 getScrollingPosition()숨겨진 변수의 값을 저장합니다. 그런 다음 새로 고친 페이지의 html에서를 사용합니다 <body onLoad="window.scrollTo(x,y). 여기서 x와 y는 숨겨진 값 값의 값입니다!
xyz

46
적어도 Ubuntu의 Chrome에서 document.documentElement.scrollTop항상 0을 반환 한다는 것을 발견 document.body.scrollTop했습니다. 그러나 작동하는 것 같습니다. 우분투 한 파이어 폭스, 다른 한편으로는, 반대는 사실이다 - 당신과 함께 공을 얻을 수 body와 함께 정확한 양 documentElement. 무엇을 제공하는지 아십니까?
tobek 2014 년

12
scrollTop속성이 모든 브라우저에서 작동하지 않으므로이 답변은 정확 하지 않습니다. 더 나은 결과를 확인 window.pageXOffset하고 확인하십시오 window.pageYOffset.
gyo

135

현재 허용되는 답변이 잘못 document.documentElement.scrollTop되었습니다. Chrome에서는 항상 0을 반환합니다. WebKit은 body스크롤을 추적하는 데 사용 하는 반면 Firefox와 IE는 html.

현재 위치를 얻으려면 다음을 원합니다.

document.documentElement.scrollTop || document.body.scrollTop

다음과 같이 현재 위치를 페이지 아래로 1000px로 설정할 수 있습니다.

document.documentElement.scrollTop = document.body.scrollTop = 1000;

또는 jQuery를 사용합니다 (해당하는 동안 애니메이션화하십시오!).

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

5
gyo의 대답, 제안하는 window.pageYOffset경우 window.scrollBy()또는 window.scrollTo()방법을 사용하는 것이 더 깨끗 합니다.
igorsantos07

32

브라우저가 현재 창 스크롤 좌표를 표시하는 방법에 약간의 불일치가 있습니다. 구글 크롬아이폰 OS는 항상 반환하는 것 0사용하는 경우 document.documentElement.scrollTop또는 jQuery의 $(window).scrollTop().

그러나 다음과 일관되게 작동합니다.

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

저도 알아 차 렸습니다. Mac과 iOS의 버그입니까?
Alexander Kim

@AlexanderKim 특정 CSS 규칙 (예 : 오버플로)이 해석되는 방식과 관련이있을 수 있으며 body 및 html 요소 모두에서 scrollTop을 확인하면 작동하는 것으로보고되었습니다. 그러나 테스트 및 디버깅을 피하기 위해 항상 안전하고 일관된 pageXOffset / pageYOffset에 의존합니다.
gyo

정답을 주셔서 대단히 감사합니다
Michael Paccione

5

HTML5 로컬 스토리지 솔루션을 사용했습니다 ... 모든 링크는 window.location을 변경하기 전에이를 설정하는 함수를 호출합니다.

localStorage.topper = document.body.scrollTop;

각 페이지에는 본문의 onLoad에 다음이 있습니다.

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }

3
localStorage의 setItem () 및 getItem ()을 사용하고 대신 링크를 클릭 할 때마다 스크롤 위치를 백업하고 페이지를 떠날 때 한 번 저장하는 것이 더 우아 할 것입니다. window.addEventListener ( "beforeunload", function () {localStorage. setItem ( "scrolly", document.documentElement.scrollTop || document.body.scrollTop);});
StanE
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.