Web에서 ScrollTop버튼 넣는 코드

특정 버튼을 클릭하면 스크롤을 맨 위로 올리는 기능.

 

jQuery와 Vanilla JS를 사용한 버전을 둘 다 써놓는다. 원하는 버전으로 쓰시길.

 

 

jQuery 사용

//페이지 상단으로 이동하는 메소드입니다.
const html_top = () => {
  // scrollTop은 상단이기 때문에 0, duration은 애니메이션 속도입니다 (ms)
  $('html, body').animate({ scrollTop: 0 }, { duration: 500 });
};
//버튼에 클릭 이벤트 바인딩해서 사용
$('#top_button').on('click', () => html_top());

Vanilla JS 사용

//페이지 상단으로 이동하는 메소드입니다.
//임의의 버튼에 클릭 이벤트 리스너를 추가합니다.
document.getElementById('top_button').addEventListener('click', function () {
  var body = document.getElementsByTagName('body')[0];
  //창의 스크롤을 본문 최상단으로 부드럽게 이동시킵니다.
  window.scroll({
    behavior: 'smooth',
    top: body.offsetTop,
  });
});

 

이 메소드를 응용해서 페이지 내 원하는 부분으로 이동시키는 버튼들을 만들 수 있다.

 

지금은 offsetTop이 body객체를 참조했지만 원하는 부분에 (앵커처럼) offsetTop을 위치시키면 된다.