#javascript

ライブラリを利用してスムーススクロールを簡単導入 素晴らしいSmooth-scroll.jsライブラリ 今回はSmooth-scroll.jsライブラリを使用したスムーススクロールの導入です。 デモはこちらです。 非常に簡単かつJQueryにも依存しないので、とても使いやすいと思います。 設置方法 ライブラリをダウンロードしサイトへ設置します。 ダウンロードGitHub Smooth-scroll.js 設置。パスは環境にあわせて書き換えてください。 ＜script src=”js/smooth-scroll.min.js”＞＜/script＞ CDNも利用できるので、環境に合わせて選びます。 &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.0/smooth-scroll.min.js"&gt;&lt;/script&gt; Smooth-scrollを初期化します。 var scroll = new SmoothScroll('a[href*="#"]'); }); 使用したいアンカーリンクに「data-scroll」を付与します。 data-scrollなくても動く気が… &lt;a data-scroll href="#content1"&gt;リンク1&lt;/a&gt; &lt;div id="content1"&gt;&lt;/div&gt; 以上で作動すると思います。 オプションその他 固定ヘッダーにかぶらないようスクロール量を調整できたり、easingのオプションも豊富なので、すごく使い勝手が良いです。 一例としてこのように書いたりましす。 var scroll = new SmoothScroll('a[href*="#"]', { speedAsDuration:true, speed:1000, easing:'easeInOutQuint', header: '[data-scroll-header]' }); 現場で出番も多いと思うので、覚えておきたいライブラリです。

#javascript

ヘッダー固定のサイトで、別ページへのアンカーリンク位置がずれる問題の解決方法

jQuery Easing Pluginで実現するスムーススクロール

Smooth-scroll.jsで実現するスムーススクロール