jQuery를 사용하여 페이지 섹션으로 부드럽게 스크롤하는 방법

1. 섹션으로 부드럽게 스크롤하는 방법은 무엇인가?

 

한 페이지 템플릿 및 웹 사이트의 경우 앵커 링크를 클릭할 때 페이지 섹션으로 스크롤하는 것이 일반적입니다. 다음은 방문자가 탐색 메뉴(또는 페이지의 다른 곳)에서 앵커 링크를 클릭할 때 페이지 섹션으로 부드럽게 스크롤하기 위해 자주 사용하는 약간의 jQuery 해킹입니다.

 

스크롤 속도 값 조정 1000원하는 속도로. 이 값은 밀리초 단위입니다.

$(document).on('click', 'a[href^="#"]', function (e) {
  e.preventDefault()
  $('html, body')
    .stop()
    .animate(
      {
        scrollTop: $($(this).attr('href')).offset().top
      },
      1000,
      'linear'
    )
})

 

탐색 및 섹션에 대한 HTML 마크업은 다음과 같습니다.

<nav>
  <a href="#features">Features</a>
  <a href="#faq">FAQ</a>
  <a href="#pricing">Pricing</a>
</nav>
<!--main container-->
<div class="container">
    <!--feature section-->
    <section id="features">...</section>
    <!--faq section-->
    <section id="faq">...</section>
    <!--pricing section-->
    <section id="pricing">...</section>
</div>

 

2. vanilla JavaScript를 활용한 방법

jQuery를 사용하고 싶지 않으세요? 부드러운 스크롤을 위해 vanilla JavaScript도 사용할 수 있지만 이전 브라우저에서는 작동하지 않을 수 있습니다 .

document.querySelectorAll('a[href^="#"]').forEach($anchor => {
  $anchor.addEventListener('click', function (e) {
    e.preventDefault()
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth',
      block: 'start' //scroll to top of the target element
    })
  })
})

 

3. CSS를 활용한 방법

vanilla JavaScript도 좋아하지 않습니까? 다음은 순수한 CSS 3 솔루션이지만 최신 브라우저 에서만 작동합니다 .

html {
    scroll-behavior: smooth;
}

 

 

JavaScript String includes() 함수 사용방법

 

[javascript] console.log() 대하여 알아보자