eclairのブログ 
javascript(vanilla JS)でアンカーリンク(ページ内リンク)をスムーススクロールさせるsmooth-scrollライブラリをご紹介します。CDN経由で読み込み、リンクタグにdata-scroll属性を追加するだけでアンカーリンクまでぬるぬるスクロールされます。
smooth-scrollライブラリの公式github
詳細な情報は以下の公式サイトをご参照ください。
cferdinandi / smooth-scroll （https://github.com/cferdinandi/smooth-scroll）
smooth-scrollライブラリの使い方
ライブラリをCDNを読み込みます
CDN経由でsmooth-scrollライブラリを読み込んでいきます。公式サイトにnpm経由でインストールする方法もあります。
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>body末尾でSmoothScrollプログラムを起動します。
bodyタグの末尾に以下の記述をしてスムーススクロールを起動させていきます。
<script>
var scroll = new SmoothScroll('a[href*="#"]');
</script>
アンカーリンクにdata-scroll属性をつけていきます。
あとは、スムーススクロールさせたいアンカーリンクに対してdata-scrollを追加してあげればOKです。
<a href="#contact" data-scroll>お問い合わせ</a>カスタマイズ方法について
固定ヘッダーの高さだけスクロール位置をずらす
ヘッダーにposition: fixed; がついているとヘッダーの高さだけコンテンツが隠れてしまう場合がありますが、その時は以下のコードに変更した上でヘッダーにdata-scroll-header属性をつけてあげることで、ヘッダーの高さを考慮してスクロール位置を自動で調整してくれます。便利！
<script>
var scroll = new SmoothScroll('a[href*="#"]',{
header: '[data-scroll-header]'
});
</script>その他のカスタマイズはgithubのドキュメントをご覧ください
その他、スクロールスピードやイージングのカスタマイズ、スクロールに応じたイベントなど各種APIでカスタマイズすることもできます。詳細はgithubのドキュメントを参照してください。
