Programing

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

crosscheck 2020. 8. 16. 19:15
반응형

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


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

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

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


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


현재 허용되는 답변이 잘못 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" });

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

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

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

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

localStorage.topper = document.body.scrollTop;

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

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

참고 URL : https://stackoverflow.com/questions/4096863/how-to-get-and-set-the-current-web-page-scroll-position

반응형