【jQuery】スムーススクロールを簡単に実装する方法

こんにちは、ハル@haru_elpisです。

jQueryでスムーススクロールを簡単に実装する備忘録です。

スムーススクロールとは

スムーススクロールとは、ページ内をスクロールする挙動を指します。Webページでよく、「Topに戻る」などのボタンを見ることが多いと思います。

それが、スムーススクロールという機能を使っているものです。

ダウンロード

GitHub - cferdinandi/smooth-scroll: A lightweight script to animate scrolling to anchor links.

A lightweight script to animate scrolling to anchor links. - GitHub - cferdinandi/smooth-scroll: A lightweight script to animate scrolling to anchor links.

github.com

ダウンロードした smooth-scroll-master.zip を解凍します。

解凍するといくつかファイルが出てきますが、smooth-scroll.min.js のみ使用するので他は必要ありません。プラグインをコピーして、jsフォルダなど任意の場所へ移動しておきましょう。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="smooth-scroll.min.js"></script>

jQuery

<script>
smoothScroll.init ({
	speed:1000,
	easing:'easeInOutQuint',
	updateURL: false,
	offset:20
});
</script>

スクロールのスピードは「speed」を変更すれば変更できます。また、最後に「false」を返すことで、URLに影響を与えないようにしています。

使い方

<a href="#" data-scroll>TOP</a>

使い方は簡単で、ハイパーリンクの<a>に data-scroll を書くだけです。

まとめ

初心者の方でも簡単に使えるので、もしスムーススクロールを使う場面が出てきたら思い出してください。

おわりっ