새로 고침시 자동 브라우저 스크롤 방지

페이지 a로 이동하여 스크롤 한 다음 새로 고침하면 페이지를 떠난 지점에서 새로 고침됩니다. 이것은 훌륭하지만 URL에 앵커 위치가있는 페이지에서도 발생합니다. 예를 들어 링크를 클릭하고 http://example.com/post/244#comment5주변을 둘러 본 후 페이지를 새로 고치면 앵커에 있지 않고 페이지가 점프합니다. 자바 스크립트로 이것을 방지하는 방법이 있습니까? 그래서 당신이 항상 앵커로 이동하는 것은 중요하지 않습니다.

이 솔루션은 브라우저 동작의 변경으로 인해 더 이상 권장되지 않습니다. 다른 답변을 참조하십시오.

기본적으로 앵커가 사용되면 창 스크롤 이벤트에 바인딩합니다. 첫 번째 스크롤 이벤트는 브라우저가 수행하는 자동 위치 조정에 속해야한다는 생각입니다. 이것이 발생하면 우리는 우리 자신의 위치를 ​​변경하고 바운드 이벤트를 제거합니다. 이는 후속 페이지 스크롤이 시스템을 지루하게하는 것을 방지합니다.

$(document).ready(function() {
    if (window.location.hash) { 
        //bind to scroll function
        $(document).scroll( function() {
            var hash = window.location.hash
            var hashName = hash.substring(1, hash.length);
            var element;

            //if element has this id then scroll to it
            if ($(hash).length != 0) {
                element = $(hash);
            }
            //catch cases of links that use anchor name
            else if ($('a[name="' + hashName + '"]').length != 0)
            {
                //just use the first one in case there are multiples
                element = $('a[name="' + hashName + '"]:first');
            }

            //if we have a target then go to it
            if (element != undefined) {
                window.scrollTo(0, element.position().top);
            }
            //unbind the scroll event
            $(document).unbind("scroll");
        });
    }

});

Chrome에서는 scrollTop을 0으로 강제 설정하더라도 첫 번째 스크롤 이벤트 이후에 점프합니다.

다음과 같이 스크롤을 바인딩해야합니다.

$(window).on('beforeunload', function() {
    $(window).scrollTop(0);
});

따라서 브라우저는 새로 고침 전 처음에 있다고 믿도록 속입니다.

자동 스크롤 복원을 비활성화하려면이 태그를 헤드 섹션에 추가하면됩니다.

<script>history.scrollRestoration = "manual"</script>

IE에서는 지원하지 않습니다. 브라우저 호환성.

몇 번의 실패 후에 마침내 나는 트릭을 할 수있었습니다. anzo 는 beforeunload사용자가 페이지를 다시로드하거나 링크를 클릭 할 때 페이지가 맨 위로 이동하도록하므로 여기에서 정확 합니다. 그렇게하는 unload것이 분명한 방법입니다.

$(window).on('unload', function() {
   $(window).scrollTop(0);
});

자바 스크립트 방식 ( ProfNandaa 에게 감사 드립니다 ) :

window.onunload = function(){ window.scrollTo(0,0); }

수정 : 2015 년 7 월 16 일

unload이벤트 에도 불구하고 Firefox에는 점프 문제가 여전히 있습니다 .

다음은보다 일반적인 접근 방식입니다. 브라우저가 스크롤 (또는 보이는 것처럼 맨 위로 점프)하는 것을 방지하는 대신 페이지의 이전 위치를 복원합니다. 즉, localStorage에 페이지의 현재 y 오프셋을 기록하고 페이지가로드되면이 위치로 스크롤합니다.

function storePagePosition() {
  var page_y = window.pageYOffset;
  localStorage.setItem("page_y", page_y);
}


window.addEventListener("scroll", storePagePosition);


var currentPageY;

try {
  currentPageY = localStorage.getItem("page_y");

  if (currentPageY === undefined) {
    localStorage.setItem("page_y") = 0;
  }

  window.scrollTo( 0, currentPageY );
} catch (e) {
    // no localStorage available
}

페이지가 맨 위에로드되도록 끝에 #을 입력 할 수 있습니다.

매우 간단하기 때문에 모든 브라우저, 모바일 및 데스크톱에서 작동합니다.

$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
    window.location.replace(url + "#");
} else {
    window.location.replace(url);
}

});

// 마지막에 #이있는 페이지를로드합니다.

이것은 나를 위해 작동합니다.

    //Reset scroll top

    history.scrollRestoration = "manual"

    $(window).on('beforeunload', function(){
          $(window).scrollTop(0);
    });

할 수 있어야합니다.

Onload, window.location.hash값이 있는지 확인하십시오 . 그렇다면 해시 값과 일치하는 ID를 가진 요소를 가져옵니다. 요소의 위치 (offsetTop / offsetLeft에 대한 재귀 호출)를 찾은 다음 해당 값을 window.scrollTo(x, y)메서드에 전달합니다 .

페이지를 원하는 요소로 스크롤해야합니다.