HTML에서 페이지를 새로 고칠 때 페이지 스크롤 위치를 맨 위로 이동
divs로 게시하는 웹 사이트를 구축 중 입니다. X를 스크롤 한 후 페이지를 새로 고치면 스크롤 위치가 X로 페이지가로드됩니다.
페이지를 새로 고침 할 때 페이지를 맨 위로 스크롤하려면 어떻게해야합니까?
내가 생각할 수 있는 것은 페이지 스크롤을 맨 위로 설정하기 위해 페이지의
onLoad()함수로 실행되는 일부 JS 또는 jQuery 입니다. 그러나 나는 그것을 어떻게 할 수 있는지 모른다.더 좋은 옵션은 페이지 새로 고침 대신 페이지로드 와 비슷한 스크롤 위치로 페이지를로드 할 속성이나 무언가가있는 경우 입니다.
DOM ready 의 scrollTop 메소드를 사용하여 수행 할 수 있습니다 .
$(document).ready(function(){
$(this).scrollTop(0);
});
간단한 일반 JavaScript 구현의 경우 :
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}여기에 대한 답변은 Safari, document.ready에는 작동하지 않습니다.
beforeunload당신이 어떤 행동을하지 못하도록 막는 행사 를 이용해야합니다setTimeout
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
다시, 가장 좋은 대답은 다음과 같습니다.
window.onbeforeunload = function () { window.scrollTo(0,0);
(비 jQuery의 경우 JQ 메소드를 검색하는 경우 찾으십시오)
편집 : 약간의 실수는 "onbeforunload"입니다 :) Chrome 및 기타 브라우저는 언로드하기 전에 마지막 스크롤 위치를 "기억"합니다. 따라서 값을 0,0으로 설정하면 페이지를 언로드하기 전에 0,0 및 스크롤바가 있던 곳으로 다시 스크롤되지 않습니다. :)
여기서 jQuery .scrollTop()함수를 확인 하십시오.
그것은 다음과 같이 보일 것입니다
$(document).load().scrollTop(0);
시도해 볼 수도 있습니다
$(document).ready(function(){
$(window).scrollTop(0);
});
x 위치에서 스크롤하려는 경우 0의 값을 x로 변경할 수 있습니다.
대신을 location.reload()사용하십시오 location.href = location.href. 이전 위치로 스크롤 location.reload()되지 않습니다.
참고 : URL에 #이 있으면 다시로드되지 않습니다.
<script> location.hash = (location.hash) ? location.hash : " "; </script>
위의 스크립트를 <head>html 태그에 넣으십시오 . 단일 페이지 앱이 어떻게 작동하는지 잘 모르겠습니다! 그러나 일반 페이지에서 매력처럼 작동합니다.
$(document).ready페이지에 비디오가 있으면 여기에 대한 답변 (스크롤 )이 작동하지 않습니다. 이 경우이 이벤트가 시작된 후 페이지가 스크롤되어 작업이 무시됩니다.
가장 좋은 답변은 다음과 같습니다.
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
$(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);
}
});
// 마지막에 #이있는 페이지를로드합니다. 따라서 항상 맨 위에로드됩니다.
supercalifragilisticexpialidocious 답변은 다음과 같습니다
add this at the top of your js file or script tag
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
document.body.scrollTop = 0; // For Safari
'program story' 카테고리의 다른 글
| Symfony2 : 요청을 양식에 바인딩 한 후 양식 유효성 검증 오류를 얻는 방법 (0) | 2020.08.02 |
|---|---|
| 두 Django 앱간에 모델을 이동하는 방법 (Django 1.7) (0) | 2020.08.02 |
| Python에서 syslog에 로깅을 구성하는 방법은 무엇입니까? (0) | 2020.07.30 |
| 투명한 이미지를 위해 가능한 가장 작은 데이터 URI 이미지 (0) | 2020.07.30 |
| 함수 내에서 전역 변수의 값을 변경하는 방법 (0) | 2020.07.30 |