HTML에서 페이지 새로 고침 시 페이지 스크롤 위치를 맨 위로 강제 적용
저는 제가 발행하고 있는 웹사이트를 만들고 있습니다.divs. 위치 X로 스크롤한 후 페이지를 새로 고치면 스크롤 위치가 X로 로드됩니다.
페이지 새로 고침 시 페이지를 강제로 맨 위로 스크롤하려면 어떻게 해야 합니까?
제가 생각할 수 있는 것은 JS나 jQuery run입니다.
onLoad()페이지 스크롤을 상단으로 설정하는 페이지 기능.하지만 어떻게 그럴 수 있었는지 모르겠어요.더 나은 옵션은 페이지 새로 고침 대신에 페이지 로드와 비슷한 페이지 로드와 같은 스크롤 위치를 기본값으로(즉, 상단에) 로드할 속성이나 무언가가 있는 경우일 것입니다.
단순한 일반 자바스크립트 구현의 경우:
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}DOM ready에서 scrollTop 메서드를 사용하여 수행할 수 있습니다.
$(document).ready(function(){
$(this).scrollTop(0);
});
여기서 답은 사파리에서는 통하지 않습니다.document.ready는 너무 일찍 실행되는 경우가 많습니다.
사용해야 합니다.beforeunload당신이 무언가를 하는 것을 방해하는 사건.setTimeout
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
창 스크롤을 다시 위쪽으로 재설정하려면,$(window).scrollTop(0)언로드 전 이벤트에서는 트릭을 수행하지만, 크롬 80에서 테스트해보니 재로드 후 이전 위치로 돌아갑니다.
이를 방지하기 위해 다음을 설정합니다.history.scrollRestoration로."manual".
//Reset scroll top
history.scrollRestoration = "manual";
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
역시 최선의 대답은:
window.onbeforeunload = function () {
window.scrollTo(0,0);
};
(jQuery가 아닌 경우 JQ 메서드를 검색하는지 조회)
편집: "언로드 전에"를 약간 잘못 알고 있습니다. :) 크롬 및 기타 브라우저는 언로드 전 마지막 스크롤 위치를 "기억"하므로 페이지 언로드 직전에 값을 0,0으로 설정하면 0,0을 기억하고 스크롤 막대가 있던 곳으로 다시 스크롤하지 않습니다. :)
시도해 볼 수도 있습니다.
$(document).ready(function(){
$(window).scrollTop(0);
});
x 위치에서 스크롤하려면 0의 값을 x로 변경할 수 있습니다.
JS history API에는 manual(수동)로 설정하면 페이지의 마지막 스크롤 위치가 복원되지 않습니다.
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
} else {
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
}
jQuery 확인.scrollTop()여기서 기능함
그것은 마치.
$(document).load().scrollTop(0);
대신에location.reload(), 간단히 쓰다location.href = location.href. 다음과 같이 이전 위치로 스크롤하지 않습니다.location.reload()한다.
참고: URL에 #가 있으면 다시 로드되지 않습니다.
<script> location.hash = (location.hash) ? location.hash : " "; </script>
위의 스크립트를 삽입합니다.<head>html 태그.한 페이지 앱이 어떻게 작동하는지 확실하지 않습니다!하지만 일반 페이지에서는 매력적으로 작동합니다.
정답은 여기(스크롤 인(scrolling in)$(document).ready는 페이지에 동영상이 있으면 작동하지 않습니다.이 경우 해당 이벤트가 발생한 후 페이지가 스크롤되어 작업이 우선됩니다.
가장 좋은 대답은 다음과 같습니다.
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
$(document).ready(function(){
$(window).scrollTop(0);
});
페이지 로딩이 완료된 후 구글 크롬이 다시 스크롤을 내리기 때문에 제게 효과가 없었습니다.제가 사용한 것은.
$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
window.location.replace(url + "#");
} else {
window.location.replace(url);
}
});
// 그러면 페이지 끝에 #가 로드됩니다.그래서 항상 상단에 적재됩니다.
이러한 CSS 스타일로 인해 페이지가 항상 다시 로드/새로 고침 시 맨 위로 스크롤된다는 것을 알게 되었습니다.
html {
height: 100%;
overflow: hidden;
width: 100%;
}
body {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
}
이는 가장 좋은 방법 중 하나입니다.
<script>
$(window).on('beforeunload', function() {
$('body').hide();
$(window).scrollTop(0);
});
</script>location.reload 대신 location.replace를 사용할 수 있습니다.
location.replace(location.href);
이 페이지는 스크롤을 맨 위에 올려놓고 다시 로드합니다.
html 페이지를 다음과 같이 사용할 수 있습니다.
history.scrollRestoration = "manual";
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
슈퍼캘리프래그리스틱 익살스러운 대답은 다음과 같습니다.
js 파일 또는 스크립트 태그 상단에 추가합니다.
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
document.body.scrollTop = 0; // For Safari
언급URL : https://stackoverflow.com/questions/3664381/force-page-scroll-position-to-top-at-page-refresh-in-html
'programing' 카테고리의 다른 글
| 웹팩으로 전역 변수 정의 (0) | 2023.09.24 |
|---|---|
| Chart.js에 데이터 값을 표시하는 방법 (0) | 2023.09.24 |
| Laravel의 Expulent ORM에서 테이블 데이터를 피벗하여 주문하는 방법 (0) | 2023.09.24 |
| 이 C 또는 C++ 매크로가 전처리기에 의해 확장되지 않는 이유는 무엇입니까? (0) | 2023.09.24 |
| 스프링 3 / Postgre에서 행 삽입에서 자동 생성 키 가져오기SQL 8.4.9 (0) | 2023.09.24 |