JavaScript 및 CSS를 사용하여 페이지 하단으로 부드럽게 스크롤하는 방법

JavaScript와 약간의 CSS를 사용하여 사용자를 긴 웹 페이지의 맨 아래로 부드럽게 스크롤하는 방법을 알아보세요.

사용자에게 페이지 하단으로 부드럽게 스크롤할 수 있는 기능을 제공하려면 scroll-behavior라는 CSS 속성을 사용할 수 있습니다. 및 scrollIntoView()라는 JavaScript 메서드 .

다음이 필요합니다.

브라우저 오른쪽의 y축 스크롤 막대를 활성화하기에 충분한 콘텐츠가 포함된 긴 웹 페이지
id가 있는 페이지 상단의 앵커 요소
id가 있는 모든 요소 페이지 하단
scroll-behavior CSS 속성
scrollIntoView() 자바스크립트 속성

예를 들어 배워봅시다!

HTML 레이아웃 예

다음 HTML 마크업 예제를 사용하여 학습할 수 있습니다(<p>....</p> dummy elements를 자유롭게 교체하십시오. 실제 콘텐츠 포함):

<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>

하나의 앵커 요소 <a>가 있습니다. ID가 scroll-to-bottom인 상단 , 그리고 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 코드를 추가하십시오.

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

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

자바스크립트 코드 작동 방식

먼저 scroll-to-bottom을 참조하는 두 개의 변수를 선언합니다. 및 page-bottom 각각.
그런 다음 이벤트 리스너를 scrollToBottom에 연결합니다. 변수를 만들고 클릭 이벤트를 특별히 수신하도록 요청합니다.
function() { .. } 내부 scrollIntoView()를 첨부합니다. 페이지 하단 요소 pageBottom에 대한 메소드 .

이제 누군가가 아래로 스크롤을 클릭할 때마다 함수는 scrollIntoView를 실행합니다. 메소드를 사용하고 page-bottom이 있는 맨 아래로 사용자를 스크롤합니다. 아이디가 있습니다.

참고:scroll-behavior: smooth;를 제거하면 스크롤은 기술적으로 계속 발생하지만 갑자기 발생합니다.

순수 바닐라 JavaScript(CSS 속성 없음)를 사용하여 부드러운 스크롤을 만들 수도 있지만 이 예제에서 보는 것보다 훨씬 더 많은 코드가 필요합니다.

모든 데모 코드를 확인하세요.

실생활에서 맨 아래로 스크롤이 어떻게 유용한가요?

생각나는 사용 사례 중 하나는 방문자가 지금은 읽을 시간이 없을 수도 있는 긴 콘텐츠 요약으로 빠르게 스크롤할 수 있도록 하는 것입니다.

브라우저 호환성

scroll-behavior CSS 속성은 Internet Explorer 또는 Safari와 호환되지 않습니다. 이러한 브라우저의 경우 순수한 JavaScript 솔루션이 필요합니다.