참고

구현 방법

1. head에서 script 로드

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.0/smooth-scroll.min.js"></script>

2. body의 마지막에 기술한다

let scroll = new SmoothScroll('a[href*="#"]', {
        speedAsDuration: true, //全てのスクロールを同じ時間で設定
        speed: 1000, //スクロールのスピード
        header: "#header", //headerの高さを考慮してスクロールしてくれる
        easing: "easeInOutQuint", //スピードの変化
      });

3. a 태그로 설정

<a href="#top" id="nav_top" data-scroll>TOP</a>
<a href="#about" id="nav_about" data-scroll>ABOUT</a>
<a href="#news" id="nav_news" data-scroll>NEWS</a>
<a href="#form" id="nav_form" data-scroll>お問い合わせ</a>

4. 결과