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

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

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

사용자 작업/입력에 따라 새로 고쳐야 하는 긴 양식이 있습니다.이 경우 페이지가 맨 위로 재설정됩니다. 이는 사용자가 원래 위치로 다시 스크롤해야 하기 때문에 사용자에게 성가신 일입니다.

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

현재 승인된 답변이 올바르지 않습니다.document.documentElement.scrollTopChrome에서는 항상 0을 반환합니다.이는 WebKit이 사용하는 기능 때문입니다.body파이어폭스와 IE가 사용하는 반면, 스크롤을 추적하기 위해html.

현재 위치를 얻으려면 다음을 수행해야 합니다.

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

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

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

또는 jQuery를 사용하여 실행하는 동안 애니메이션을 만듭니다.

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

당신은 찾고 있습니다.document.documentElement.scrollTop소유물.

2021년 업데이트: 브라우저와 일치하지 않음scrollTop사라진 것 같습니다.

브라우저가 현재 창 스크롤 좌표를 표시하는 방법에는 몇 가지 불일치가 있습니다.Mac 및 iOS에서 Google Chrome은 항상 반환되는 것 같습니다.0사용 시document.documentElement.scrollTopor jQuery's$(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);
  }

이것은 위에서 스크롤의 px 값을 제공합니다.

document.documentElement.scrollTop

최근에는 다음과 같은 이점이 있습니다.window.scrollX그리고.window.scrollY이것은 그것을 해결하기 위한 대안이 될 수 있습니다.

 var stop = true;
  addEventListener('drag', (event) => {
    if (event.clientY < 150) {
      stop = false;
      scroll(-1)
    }
    if (event.clientY > ($(window).height() - 150)) {
      stop = false;
      scroll(1)
    }
    if (document.body.getBoundingClientRect().y === 0){
      stop = true;
    }
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
      stop = true;
    }
  });
  addEventListener('dragend', (event) => {
    stop = true;
  });

  var scroll = function (step) {
    var scrollY = $(window).scrollTop();
    $(window).scrollTop(scrollY + step);
    if (!stop) {
      setTimeout(function () { scroll(step) }, 20);
    }
  }

이제 사용할 수도 있습니다.window.scrollTo({ top: 0, behavior: 'smooth' });위의 jQuery 솔루션을 애니메이션에 사용하는 대신.설명서는 다음과 같습니다. https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

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