HTML에서 페이지를 새로 고칠 때 페이지 스크롤 위치를 맨 위로 이동

129

divs로 게시하는 웹 사이트를 구축 중 입니다. X를 스크롤 한 후 페이지를 새로 고치면 스크롤 위치가 X로 페이지가로드됩니다.

페이지를 새로 고침 할 때 페이지를 맨 위로 스크롤하려면 어떻게해야합니까?

내가 생각할 수 있는 것은 페이지 스크롤을 맨 위로 설정하기 위해 페이지의 onLoad()함수로 실행되는 일부 JS 또는 jQuery 입니다. 그러나 나는 그것을 어떻게 할 수 있는지 모른다.
더 좋은 옵션은 페이지 새로 고침 대신 페이지로드 와 비슷한 스크롤 위치로 페이지를로드 할 속성이나 무언가가있는 경우 입니다.

— 달
소스

놀랍게도, 여기에있는 솔루션 중 어느 것도 나를 위해 효과가 없었지만이 솔루션은 다음과 같습니다. stackoverflow.com/a/11486546/470749

— Ryan

165

DOM ready 의 scrollTop 메소드를 사용하여 수행 할 수 있습니다 .

$(document).ready(function(){
    $(this).scrollTop(0);
});

— 가볍게 두드리기
소스

9

Safari에서는 작동하지 않습니다. 그러나 이것은-> stackoverflow.com/a/18633915/102133 입니다.

— Ben

165

간단한 일반 JavaScript 구현의 경우 :

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

스 니펫 확장

— 교수
소스

1

이것이 정답입니다. jQuery 솔루션은 모든 경우에 작동하지 않습니다.

— Harry Stevens

@ Paul12_-방금 테스트하여 제대로 Safari 11.0.3작동합니다. 어느 것을 사용하고 있습니까?

— ProfNandaa

이것은 나를 위해 작동하지 않았습니다. 작동하기 위해 onbeforeload 함수에서 돌아와야했습니다.

— Iqbal

@Iqbal-무엇을 했 return습니까?

— ProfNandaa

1

추가해야 document.querySelector('html').style.scrollBehavior = '';할 수도 있습니다. 로 설정된 경우 smooth페이지가 다시로드되기 전에 맨 위로 이동하지 않을 수 있습니다.

— kevnk

35

여기에 대한 답변은 Safari, document.ready에는 작동하지 않습니다.

beforeunload당신이 어떤 행동을하지 못하도록 막는 행사 를 이용해야합니다setTimeout

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

— 벤
소스

1

스크롤 기능 추가 : $ ( 'html'). text ( ''); 유모차가 재설정됩니다

— user956584

1

@Userpassword $ ( "html"). remove ()가 더 낫다고 생각하지 않습니까?

— 벤

18

다시, 가장 좋은 대답은 다음과 같습니다.

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

(비 jQuery의 경우 JQ 메소드를 검색하는 경우 찾으십시오)

편집 : 약간의 실수는 "onbeforunload"입니다 :) Chrome 및 기타 브라우저는 언로드하기 전에 마지막 스크롤 위치를 "기억"하므로 페이지를 언로드하기 직전에 값을 0,0으로 설정하면 0,0을 기억하고 원합니다 스크롤바가 있던 곳으로 다시 스크롤하지 마십시오. :)

— xoxel
소스

@ Paul12_ Safari가 document.documentElement.scrollTop작동 해야 합니다. 나는 일반적으로 둘 다 사용합니다.

— Graham O'Mahony

9

jQuery .scrollTop()기능 확인여기서 하십시오.

그것은 다음과 같이 보일 것입니다

$(document).load().scrollTop(0);

— jon3laze
소스

9

시도해 볼 수도 있습니다

$(document).ready(function(){
    $(window).scrollTop(0);
});

x 위치에서 스크롤하려는 경우 0의 값을 x로 변경할 수 있습니다.

— 안킷
소스

7

대신을 location.reload()사용하십시오 location.href = location.href. 이전 위치로 스크롤 location.reload()되지 않습니다.

참고 : URL에 #이 있으면 다시로드되지 않습니다.

— 나우팔
소스

4

<script> location.hash = (location.hash) ? location.hash : " "; </script>

위의 스크립트를 <head>html 태그에 넣으십시오 . 단일 페이지 앱이 어떻게 작동하는지 잘 모르겠습니다! 그러나 반드시 일반 페이지에서 매력처럼 작동합니다.

— 가혹한 53
소스

4

여기에 대한 답변 $(document).ready페이지에 비디오가 있으면 )이 작동하지 않습니다. 이 경우이 이벤트가 시작된 후 페이지가 스크롤되어 작업이 무시됩니다.

가장 좋은 답변은 다음과 같습니다.

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

— DrPollit0
소스

3

$(document).ready(function(){
    $(window).scrollTop(0);
});

Google 크롬은 페이지로드가 끝난 후 다시 아래로 스크롤되므로 작동하지 않았습니다. 내가 사용한 것은

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

// 마지막에 #이있는 페이지를로드합니다. 따라서 항상 맨 위에로드됩니다.

— Daut
소스

3

창 스크롤을 맨 위로 다시 설정하려면 $(window).scrollTop(0)beforeunload 이벤트에서 트릭을 수행하지만 Chrome 80에서는 테스트를 다시로드 한 후 이전 위치로 돌아갑니다.

그것을 방지하기 위해 설정 history.scrollRestoration에 "manual".

//Reset scroll top

history.scrollRestoration = "manual";

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

— 알렉스 재미
소스

이것은 나에게 가장 좋은 반응이다 크롬 / 리눅스에서 작동

— 웹 등의 Informatique - SNS

0

supercalifragilisticexpialidocious 답변은 다음과 같습니다

이것을 js 파일 또는 스크립트 태그 상단에 추가하십시오.

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari

— 니코 벨
소스