브라우저 페이지 맨 위로 이동하는 방법

186

모달 팝업을 작성 중이며 열린 모달 버튼을 누를 때 브라우저가 화면 상단으로 이동해야합니다. jQuery를 사용하여 브라우저를 맨 위로 스크롤하는 방법이 있습니까?

— 출구
소스

405

다음 scrollTop과 같이를 설정할 수 있습니다 .

$('html,body').scrollTop(0);

또는 상단에 스냅하는 대신 작은 애니메이션을 원할 경우 :

$('html, body').animate({ scrollTop: 0 }, 'fast');

— 닉 크레이 버
소스

1

좋은 ... 나는이 작업을 수행하기 전에 jQuery를위한 scrollTo 플러그인을 사용했습니다 - 코드와 코드의 비트를 저장 한 수 ... 교훈 ;-) 주셔서 감사합니다

— Zathrus 작가

@MikhailBatcer-CSS를 비활성화 한 다음 작동하는지 확인하십시오. html및 body태그 스타일 지정 방법에 문제가있을 수 있습니다 . 그렇지 않으면 $(window)대신 사용하십시오.

— invot

애니메이션 스크롤링 기간을 추가하는 방법은 무엇입니까?

— Maxim Strutinskiy

139

애니메이션이 없으면 일반 JS를 사용할 수 있습니다.

scroll(0,0)

애니메이션으로 Nick의 답변을 확인하십시오 .

— 이오 누치 스타이 쿠
소스

4

모든 브라우저에서 지원됩니까?

— Pacerier

1

scrollCSSOM 표준에 있고 scrollTo원래 DOM 레벨 0에 정의되었으며 표준의 일부는 아닙니다. 그러나 CSSOM에는 scrollTo이전 버전과의 호환성이 포함되어 있습니다.

— 클린트 Pachl

3

scroll폭넓게 지원되고 있다고 생각 합니다. stackoverflow.com/q/1925671/41906

— Clint Pachl 8:14의

감사. window && window.scroll(0,0);내 뷰 모델에서 허용되는 것 같습니다 .

— 음욕

34

jQuery UI 대화 상자를 사용하는 경우 창에서 고정 된 위치로 표시되도록 모달의 스타일을 지정하면 팝업되지 않아 스크롤 할 필요가 없습니다. 그렇지 않으면,

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

트릭을해야합니다.

— 실크 스터
소스

13

자바 스크립트없이 할 수 있고 단순히 앵커 태그를 사용합니까? 그런 다음 무료로 해당 js에 액세스 할 수 있습니다.

모달을 사용하는 동안 js free에 관심이 없다고 가정합니다. ;)

— 키 어스
소스

1

앵커 태그를 사용하면 해시 기반 탐색이 중단됩니다.

— Tom Landau

2

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

스 니펫 확장

— 와 루나 만 줄라
소스

2

나는 이것이 오래된 것을 알고 있지만 Edge에 문제가있는 사람들을 위해 :

일반 JS : window.scrollTop=0;

불행하게도, scroll()및 scrollTo()에지 오류를 던져.

— 조쉬 파울 리슨
소스

1

jQuery UI 대화 상자를 사용하는 경우 창에서 고정 된 위치로 표시되도록 모달의 스타일을 지정하면 팝업되지 않아 스크롤 할 필요가 없습니다. 다른

— 게리
소스

0

순수한 자바 스크립트 솔루션

theId.onclick = () => window.scrollTo(top: 0)

부드러운 스크롤을 원한다면

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })

— 모가지
소스