자동 스크롤링 버튼 만들기 | JS Snippets


자동 스크롤링 버튼 만들기



1. 무엇이 필요할까? 🤔


버튼을 누르면 해당 섹션으로 부드럽게 스크롤링 되는 기능은 제품과 서비스를 소개하는 한 장짜리 랜딩 페이지에서 자주 볼 수 있다.

타겟 요소까지 스크롤이 되는 것은 다음과 같이 정의할 수 있다.

타겟 요소 영역의 최상단이 뷰포트의 상단과 일치하는 것

특정 요소가 있는 좌표로 스크롤이 이동하는 기능을 구현하기 위해선 아래의 것들이 필요하다.

  • 타겟 요소의 좌표
  • 해당 좌표로 스크롤이 이동하는 (뷰포트의 상단에 타겟이 정렬되는) 메소드



2. 요소의 좌표와 뷰포트의 위치 🧭


2-1. Element.getBoundingClientRect()

뷰포트 (화면에 웹페이지가 렌더링되는 영역을 말함)와 특정 요소의 상대적인 크기, 위치 정보가 담긴 DOMRect 객체를 반환하는 웹 API 메소드이다.

아래는 콘솔에 getBoundingClientRect 메소드를 호출한 결과이며 (콘솔창 참고) 각 프로퍼티의 의미는 이미지를 참조하면 된다.

프로퍼티 중 top 값이 바로 나에게 필요한 참조값이다.

2-2. window.pageYOffset

window 객체의 프로퍼티로써 문서의 최상단으로부터 현재 스크롤까지의 거리를 나타낸다. 읽기 전용 프로퍼티이기 때문에 window.pageYOffset = 300;을 입력해도 해당 좌표로 스크롤이 되진 않는다.

window.addEventListener('scroll', () => {
  console.log(window.pageYOffset);
});

브라우저 콘솔에 위 코드를 입력하면 스크롤이 움직일때마다 window.pageYOffset값을 출력되는 것을 볼 수 있다.

스크롤이 0일때만 스크롤링 버튼을 누르는 것이 아니기 때문에 요소의 top 값이 변하더라도 현재 스크롤 위치에 맞춰서 위치 값을 보정해줘야 한다.

targetElement.getBoundingClientRect().top + window.pageYOffset

현재 스크롤이 어디에 있던, 언제나 위 값을 참조하여 스크롤 하면 된다.

이제 원하는 좌표로 스크롤을 이동시켜주는 기능만 찾으면 된다.




3. 첫번째 방법 | Window.scrollTo() ⛳️

문서의 특정 좌표로 스크롤 이동하는 window의 메소드이다.

3-1. Syntax

window.scrollTo(x좌표, y좌표)
window.scrollTo(옵션)

// example
window.scrollTo(0, 1000);
window.scrollTo({
  top: 1000,
  left: 0,
  behavior: "smooth"
});

3-2. 적용