바닐라 자바스크립트 맨 위로 스크롤

JavaScript power scroll to top 함수를 만들어 보겠습니다.
페이지 오른쪽 하단에 위치할 버튼을 만들고 클릭하면 페이지 상단으로 이동합니다.

HTML 구조

<button onclick="scrollToTop()" class="scroll-top">☝️</button>

이것이 우리가 필요한 전부입니다. 일부CSS를 정의하고 JavaScript에 scrollToTop 함수를 빌드합니다.

CSS 설정

.scroll-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 99;
  outline: none;
  background-color: #efefef;
  border: 1px solid #333;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

스크롤 버튼은 position: fixed 를 얻고 하단과 오른쪽으로 오른쪽 하단으로 오프셋합니다.
그런 다음 상자처럼 보이도록 일반적인 스타일을 지정합니다.

자바스크립트 맨 위로 스크롤

function scrollToTop() {
  window.scroll({top: 0, left: 0, behavior: 'smooth'});
}

이를 수행하는 방법에는 여러 가지가 있다는 점에 유의하는 것이 좋습니다.
이 기사처럼 scrollIntoView을 사용할 수 있습니다. 그러나 오늘날 우리는 일반 스크롤 기능을 사용하고 있습니다.

스크롤해야 하는 위치와 동작을 정의할 수 있습니다.

스크롤을 수행하는 또 다른 방법은 scrollTo를 사용하는 것입니다.

window.scrollTo(0, 0);

Codepen에서 작동하는 것을 확인하십시오.

Chris Bongers( Vanilla JavaScript Scroll to Top)의 펜@rebelchris 보기
에 CodePen .

브라우저 지원

아쉽게도 scroll API는 완전히 지원되지 않습니다!

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나