[JS] 페이지 상단(하단)으로 이동하는 버튼 구현하기

 

미리보기

 

버튼 클릭 하나만으로 웹 페이지의 상단으로 이동하는 기능을 구현해보겠습니다.

 

코드

<div class="moveTopBtn">맨 위로</div>

.moveTopBtn {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 4rem;
  height: 4rem;
  background: #000;
  color: #fff;
 }

간단한 HTML 코드로 버튼을 만들어 줍니다. 대부분의 해당 버튼은 페이지 오른쪽 하단에 위치하기에 fixed 속성을 통해 고정시켜주었습니다.

 

const $topBtn = document.querySelector(".moveTopBtn");

// 버튼 클릭 시 맨 위로 이동
$topBtn.onclick = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });  
}

버튼 DOM 객체를 불러와 onclick 이벤트를 걸어주고 클릭 시, 스크롤을 이동시키기 위한 window.scrollTo 메서드를 이용한 코드입니다.

 

페이지에서 특정 위치로 스크롤 이동시키기 위해서는 window.scrollTo 메서드를 사용하면 됩니다.

해당 메서드의 behavior: "smooth" 속성을 이용해 부드러운 이동을 구현할 수 있습니다.

 

https://gurtn.tistory.com/127

[JS] 페이지 내 특정위치로 스크롤 이동하기

 

 

예제 코드

 

페이지 하단으로 이동

<div class="moveBottomBtn">맨 아래로</div>

const $bottomBtn = document.querySelector(".moveBottomBtn");

// 버튼 클릭 시 페이지 하단으로 이동
$bottomBtn.onclick = () => {
  window.scrollTo({ 
    top: document.body.scrollHeight, // <- 페이지 총 Height
    behavior: "smooth" 
  });
};

페이지 상단으로 이동하는 코드에서 window.scrollTo 메서드에 스크롤을 이동시킬 top 위치 값만 바꿔주면 쉽게 페이지 하단으로 이동할 수 있는 버튼을 제작할 수 있습니다.