ウィルスタイル株式会社 / Will Style Inc.

インストール

まずはSmooth Scrollをインストールします。
下記URLよりダウンロードするか、npmでインストールします。

Smooth Scroll

<script src="path/to/smooth-scroll.js"></script>

npm install smooth-scroll

使い方

「#」から始まるアンカーすべてに効かせたい場合は以下のように記述します。

var scroll = new SmoothScroll('a[href*="#"]');

第２引数でオプションを指定できます。

	ignore: '[data-scroll-ignore]', // 無効にしたいリンクのセレクタ
	header: null, // 固定ヘッダーのセレクタ
	// Speed & Easing
	speed: 500, // スクロールするスピードを指定します。
	offset: 0, // スクロールする位置を整数で指定します。
	easing: 'easeInOutCubic', // イージングを指定できます
	customEasing: function (time) {}, // カスタムイージング
	// Callback API
	before: function (anchor, toggle) {}, // スクロール前のコールバック関数
	after: function (anchor, toggle) {} // スクロール後のコールバック関数

固定ヘッダーの指定

背景のある固定ヘッダーが存在する場合、スクロールした上部がヘッダーで隠れてしまう場合があります。
CSSで固定ヘッダー分ずらす方法もありますが、Smooth Scrollはheaderオプションで指定したセレクター分ずらしてくれます。

以下のようにSection Topが固定ヘッダーで隠れてしまいます。

オプションにセレクターを記述します。

	header: '[data-scroll-header]'

そしてheaderにdata-scroll-header属性を指定します。

	<header id="header" data-scroll-header>
		...
	</header>

以下のようにスクロールトップが固定ヘッダー分下にずれ、Section Topがきちんと表示されます。

URLを更新せずにスクロールさせる

Smooth Scrollは通常の使用方法ではURLが更新されます。
ですがサイトによってはURLを更新させたくない場合もあります。
そんな時リンクのクリック時にanimateScroll()を使ってスクロールさせる方法が紹介されています。

animateScroll関数は以下のようにanchorにアンカー先のidを指定し、toggleにクリックしたリンクを指定することでスクロールさせることができます。

	var scroll = new SmoothScroll();
	scroll.animateScroll( anchor, toggle, options || {} );

これをクリックイベントで取得し、実行するとURLを変更することなくスクロールアニメーションさせることができます。

var scroll = new SmoothScroll();
var options = {};
var smoothScrollWithoutHash = function (selector, settings) {
	
	var clickHandler = function (event) {
		var toggle = event.target.closest( selector );
		if ( !toggle || toggle.tagName.toLowerCase() !== 'a' ) return;
		var anchor = document.querySelector( toggle.hash );
		if ( !anchor ) return;

		event.preventDefault();
		scroll.animateScroll( anchor, toggle, options || {} );
	};

	window.addEventListener('click', clickHandler, false );
};
smoothScrollWithoutHash( 'a[href*="#"]' );

イージング

イージングはeasingオプションで設定できます。
デフォルトでは「easeInOutCubic」になっていますが以下のイージングが標準で使用できます。

また、customEasingオプションでイージングを変更することが可能です。
その他のイージングは以下のURLなどを参考にしてみてください。

https://codepen.io/xerxesnoble/pen/JNgmJR?editors=0010

easeInElasticを指定したのが以下の例です。

customEasing: function (t) {
 	return (.04 - .04 / t) * Math.sin(25 * t) + 1
},

コールバック

何度かDEMOでも記述していますがスクロール前、スクロール後にコールバック関数を指定できます。
それぞれanchorとtoggleでスクロール先のHTML ElementとクリックされたリンクのHTML Elementが取得できます。

before: function (anchor, toggle) {
	// anchorはスクロール先のHTML Elementです。
	// toggleはクリックされたリンクのHTML Elementです。
},
after: function (anchor, toggle) {
	// anchorはスクロール先のHTML Elementです。
	// toggleはクリックされたリンクのHTML Elementです。
},

これを使用すればクリックされたリンクをactiveにしたり、スクロール先のElementを変更したりできます。

最後に

スクロール系のプラグインはjQueryでは豊富に存在するのですが、Vanillaだとなかなかありません。
そんな時Smooth Scrollはかなり重宝します。
みなさんもぜひご活用ください。