JavaScript와 CSS로 페이지 하단까지 부드럽게 스크롤하는 방법

JavaScript와 약간의 CSS만으로 긴 웹페이지 하단까지 사용자를 부드럽게 스크롤시키는 방법을 알아봅니다.

사용자가 한 번의 클릭으로 페이지 맨 아래로 자연스럽게 이동할 수 있게 하려면, CSS 속성인 scroll-behavior와 JavaScript 메서드인 scrollIntoView()를 함께 활용하면 됩니다.

준비물은 다음과 같습니다:

브라우저 오른쪽의 y축 스크롤바가 활성화될 만큼 콘텐츠가 긴 웹페이지
페이지 상단에 id가 지정된 앵커(anchor) 요소
페이지 하단에 id가 지정된 임의의 요소
scroll-behavior CSS 속성
scrollIntoView() JavaScript 메서드

그럼 예제를 통해 직접 배워보겠습니다!

HTML 레이아웃 예제

다음 HTML 마크업 예제를 참고하세요 (더미 <p>....</p> 요소는 실제 콘텐츠로 자유롭게 교체하셔도 됩니다):

<main>
  <p><a id="scroll-to-bottom">Scroll to bottom</a></p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p id="page-bottom">You have reached the bottom of this page!!</p>
</main>

여기서 주목할 점은, 상단에는 id가 scroll-to-bottom으로 지정된 앵커 요소 <a>가 하나 있고, 하단에는 id가 page-bottom으로 지정된 요소가 하나 있다는 것입니다.

CSS

부드러운 스크롤을 활성화하려면 CSS 스타일시트에 다음 코드를 추가합니다:

html {
  scroll-behavior: smooth;
}

/* Layout */
main {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 1rem;
}

#scroll-to-bottom {
  font-weight: bold;
  color: green;
}

참고: 스크롤의 핵심 비결은 scroll-behavior: smooth;입니다. 그 외의 CSS 스타일은 단순히 화면을 꾸미기 위한 것이므로 필수는 아닙니다.

JavaScript

사용자가 Scroll to Bottom을 클릭했을 때 페이지 상단에서 하단까지 부드럽게 이동하도록 하려면, 다음 JavaScript 코드를 추가합니다:

let scrollToBottom = document.querySelector("#scroll-to-bottom")
let pageBottom = document.querySelector("#page-bottom")

scrollToBottom.addEventListener("click", function() {
  pageBottom.scrollIntoView()
})

JavaScript 코드의 작동 원리

먼저 두 개의 변수를 선언하여 각각 scroll-to-bottom과 page-bottom 요소를 참조합니다.
그다음 scrollToBottom 변수에 이벤트 리스너를 연결하고, 특히 클릭(click) 이벤트를 감지하도록 설정합니다.
function() { .. } 내부에는 페이지 하단 요소인 pageBottom에 scrollIntoView() 메서드를 적용합니다.

이제 누군가 Scroll to Bottom을 클릭할 때마다 함수가 실행되고, scrollIntoView 메서드가 호출되어 사용자는 page-bottom id가 위치한 페이지 하단으로 자연스럽게 스크롤됩니다.

참고: scroll-behavior: smooth;를 제거해도 기술적으로는 스크롤이 여전히 작동하지만, 동작이 매우 투박하고 갑작스럽게 느껴집니다.

순수 바닐라 JavaScript만으로도(CSS 속성 없이) 부드러운 스크롤을 구현할 수 있지만, 이 예제보다 훨씬 더 많은 코드가 필요합니다.

전체 데모 코드를 확인해 보세요.

실무에서 '하단으로 스크롤'은 어떻게 유용할까?

대표적인 활용 사례 중 하나는, 방문자가 당장 읽을 시간이 없는 긴 콘텐츠의 요약이나 결론 부분으로 빠르게 이동할 수 있도록 돕는 것입니다. 이 외에도 FAQ 페이지, 긴 약관 문서, 댓글 영역 등 어디든 유용하게 적용할 수 있습니다.

브라우저 호환성

scroll-behavior CSS 속성은 Internet Explorer와 구버전 Safari(15.4 미만)에서는 지원되지 않습니다. 해당 브라우저까지 완벽하게 지원해야 하는 프로젝트라면, 순수 JavaScript 기반의 대체 솔루션을 사용하는 것이 좋습니다.