Blog スタッフブログ

Vanilla.jsのアニメーションスクロールプラグイン「Smooth Scroll」

Category | Blog
/ 18,511views

Smooth Scroll

こんにちは、アートディレクターの奥田です。
先日自分がバンドをはじめた頃に第一線でライブをしていた兄貴的存在のバンドの限定復活ライブがありました。
自分がバンドをはじめた頃といえばちょうど10年前ぐらいでしょうか。10年の時を経てもその音は色褪せず「バン」と一発、音を出しただけでそのバンドの空気になる。
やはり音楽の持つ力は素晴らしいとあらためて感じました。

さて、Web制作でjQueryとおさらばして数ヶ月経ちますが、調べれど調べれどjQueryのプラグインしか出て来ず困ったという場面が何度かありました。
今回はアニメーションスクロールはこれで決まりでしょうというプラグインがあったのでご紹介致します。

Table of contents

  1. インストール
  2. 使い方
  3. 固定ヘッダーの指定
  4. URLを更新せずにスクロールさせる
  5. イージング
  6. コールバック
  7. 最後に

インストール

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

Smooth Scroll

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

使い方

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

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

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

	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」になっていますが以下のイージングが標準で使用できます。

Ease-IneaseInQuad
easeInCubic
easeInQuart
easeInQuint
Ease-OuteaseOutQuad
easeOutCubic
easeOutQuart
easeOutQuint
Ease-In-OuteaseInOutQuad
easeInOutCubic
easeInOutQuart
easeInOutQuint

また、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はかなり重宝します。
みなさんもぜひご活用ください。

Category | Blog
Author | Mineo Okuda / 18,511views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)