[JavaScript] jQuery를 사용하지 않고 최상단 화면 이동 기능 구현하기

jQuery를 사용하지 않고 최상단 화면 이동 기능 구현하기

들어가며

• 제이쿼리(jQuery)를 사용하지 않고, 자바스크립트(JavaScript)만으로 화면의 최상단으로 이동할 수 있는 버튼을 만들 수 있다.

 

방법 1 : 스크롤 이동 효과를 주며 이동하기

• ID가 "scrollup"인 버튼을 누르면 스크롤이 이동하는 효과와 함께 화면의 최상단으로 이동하도록 해보자.

HTML

<button id="scrollup"></button>

 

JavaScript

var scrollBtn = document.getElementById('scrollup');

// 10 밀리세컨드(ms) 마다 -50px 씩 스크롤된다. 
const scrollWindow = function () {  
  if (window.scrollY != 0) {
    setTimeout(function () {
      window.scrollTo(0, window.scrollY - 50);    // 50px
      scrollWindow();
    }, 10);    // 10ms
  }
};

scrollBtn.addEventListener("click", scrollWindow);

 

방법 2 : 바로 최상단으로 이동시키기

• 간단하게 화면의 최상단으로 이동시키는 함수를 onclick 속성으로 주어 스크롤을 이동하는 효과 없이 곧바로 페이지의 최상단으로 이동하도록 할 수 있다.

<button id="scrollup" onclick="window.scrollTo(0,0);"></button>

 

 

참고

• How to create a scroll to top button with JavaScript

How to create a scroll to top button with JavaScript - w3collective