부드러운 스크롤 효과를 만드는 간단한 CSS 트릭

부드러운 스크롤 효과를 얻기 위해 다른 jquery 라이브러리를 사용하거나 일반 바닐라 자바스크립트를 작성합니다.

jQuery 구문:

//Smooth scrolling with links
$('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
  $('html,body').animate({scrollTop:$(location.hash).offset().‌​top}, 500);
});

저는 CSS를 좋아합니다. CSS 속성만 사용하여 이러한 효과를 얻을 수 있는지 궁금합니다. 그런 다음 이 기본 CSS 기능scroll-behavior이 발생합니다.

CSS의 scroll-behavior 속성을 사용하면 사용자가 스크롤 상자 내에서 고정된 위치를 대상으로 하는 링크를 클릭할 때 브라우저의 스크롤 위치가 새 위치로 이동하는지 또는 전환을 매끄럽게 애니메이션화할지 여부를 정의할 수 있습니다.
#hash 링크를 클릭하면 기본 동작은 브라우저가 해당 ID와 일치하는 요소로 포커스를 변경하는 것입니다. 페이지가 스크롤될 수 있지만 스크롤은 포커스 변경의 부작용입니다.

예시

html {
  scroll-behavior: smooth;
}

또한 구문이 다릅니다.

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

샘플 HTML을 살펴보십시오.

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<div class="scroll-container">
  <div class="scroll-page" id="page-1">1</div>
  <div class="scroll-page" id="page-2">2</div>
  <div class="scroll-page" id="page-3">3</div>
</div>

CSS

html {
    scroll-behavior: smooth;
}

브라우저 호환성

결론

👏👏 여기까지 와서 이 멋진 CSS 부드러운 스크롤 효과를 사용할 수 있기를 바랍니다. 따라서 프로젝트에서 시도해 보고 즐기시기 바랍니다.

자유롭게 생각과 의견을 공유하고 문제나 질문이 있으면 의견을 남겨주세요.

다음까지,
계속 해킹하세요, 건배