参考
実装の仕方
1. head内でscriptを読み込む
index.html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.0/smooth-scroll.min.js"></script>
2. bodyの最後に記述する
パラメーターはgithubを見てください。
main.js
let scroll = new SmoothScroll('a[href*="#"]', {
speedAsDuration: true, //全てのスクロールを同じ時間で設定
speed: 1000, //スクロールのスピード
header: "#header", //headerの高さを考慮してスクロールしてくれる
easing: "easeInOutQuint", //スピードの変化
});
3. aタグに設定する
例です。
data-scrollを設置しておきます。
index.html
<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. 結果
ハンバーガーメニューのお問い合わせを押すと下にスクロールします。
↧