원활한 스크롤 만들기

CSS를 사용하여 원활한 스크롤 효과를 만들어보세요.

원활한 스크롤

Section 1
나를 클릭하세요, 하단 2부로 원활하게 스크롤합니다。

링크를 클릭하면 '원활'한 스크롤 효과를 볼 수 있습니다。

주의사항:scroll-behavior 속성을 제거하면 원활한 스크롤이 취소됩니다。

원활한 스크롤

<html> 요소에 scroll-behavior: smooth 전체 페이지의 원활한 스크롤을 활성화할 수 있습니다：

주의사항:특정 요소/스크롤 컨테이너에도 추가할 수 있습니다。

예제

html {
  scroll-behavior: smooth;
}

직접 시험해 보세요

브라우저 지원

표의 숫자는 스크롤 행동 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
61.0 79.0 36.0 14.0 48.0

크로스 브라우저 솔루션

를 지원하지 않는 브라우저에서는 scroll-behavior 의 특정 프로퍼티를 지원하는 브라우저에서는 JavaScript나 JavaScript 라이브러리(예:) jQuery）를 사용하여 모든 브라우저에 적합한 솔루션을 만들 수 있습니다：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // 모든 링크에 원활한 스크롤을 추가합니다
  $("a").on('click', function(event) {
    // 기본 동작을 덮어씌우기 전에, this.hash이 값이 있어야 합니다
    if (this.hash !== "") {
      // 기본 앵커 클릭 동작을 방지합니다
      event.preventDefault();
      // 해시 값 저장
      var hash = this.hash;
      // jQuery의 animate() 메서드를 사용하여 원활한 페이지 스크롤을 추가합니다
      // 선택된 숫자(800)는 지정된 영역으로 스크롤하는 데 필요한 밀리초를 지정합니다
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // 스크롤이 완료되면, URL에 해시 (#)를 추가합니다(기본 클릭 동작)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

직접 시험해 보세요

관련 페이지

참조 설명서:CSS scroll-behavior 속성