スムーススクロールを実装する方法(ページ内をゆっくり移動)

スムーススクロールを実装する方法(ページ内をゆっくり移動)

ページ内をゆっくりと移動するスムーススクロール。jQueryでは簡単に実現できるんですが、JavaScriptだけの環境で実装したい人のために、今回は、smooth-scrollという、便利で簡単、軽量なライブラリを紹介します。

サンプルデモ

スムーススクロールのデモ
スムーススクロールのデモ

スムーススクロールのサンプルデモです。jQueryを利用せずに純粋なJavaScriptだけで、「ページ内のゆっくり移動」を実現しています。どのボタンをクリックしても、「移動先」「到達までにかかる時間」は同じです。が、アニメーション(テンポ)が違います。実際に試してみて下さい。

サンプルデモを見る

ライブラリの入手

スムーススクロールを実現するのに、私がこれまで試してきた中でダントツにオススメなライブラリがsmooth-scrollです。どのライブラリよりも軽量で、それでいてお手軽にカスタマイズできます。

ダウンロードしたsmooth-scroll-master.zipを解凍すると、jsというフォルダの中に、smooth-scroll.jssmooth-scroll.min.jsというファイルが含まれています。そのうち、どちらか1つのファイルを利用します。違いはありません。後者のsmooth-scroll.min.jsは、余計な改行やスペースが削られた軽量版ですが、カスタマイズはしづらいです。

smooth-scroll-master.zip

  • smooth-scroll-master
    • dist
      • js
        • smooth-scroll.js
        • smooth-scroll.min.js

プログラミング

ライブラリを入手したら、早速、スムーススクロールを実装してみましょう。

ライブラリを読み込む

まず必要なのは、先ほどダウンロードしたライブラリを読み込んであげることですね。ヘッダー内で、次の通り、読み込んで下さい。

HTML

<head>
	<!-- ライブラリの読み込み -->
	<script src="./smooth-scroll.js"></script>
</head>

HTMLタグを用意する

続いて、ページ内リンクのタグを用意しましょう。例えば、ID属性値がsection-2の見出しに移動するには、次の通りに記述しますよね。

HTML

<a href="#section-2">2章へ移動</a>

<h2 id="section-2">2章</h2>

このページ内リンクに、ライブラリの効果(スムーススクロール)を適用するには、data-scrollという属性を付けてあげて下さい。たったこれだけで、そのページ内リンクをスムーススクロールにすることができます。

HTML

<a href="#section-2" data-scroll>2章へ移動</a>

<h2 id="section-2">2章</h2>

ライブラリを起動する

最後の仕上げに、ライブラリを起動して下さい。ボディの最後あたりに、次の記述を加えて下さいね。これでスムーススクロールが有効になりました。実際に動くか、確認してみて下さいね。

HTML

<!-- ボディの最後あたり -->
<script>
	// スムーススクロールを起動する
	smoothScroll.init() ;
</script>
</body>

注意点

この章では、smooth-scrollを使う上で、特定の場合に発生する不具合を防ぐ方法を説明します。

トップに戻るリンク

なお、一番上まで戻るリンクの場合、#topだとエラーが発生してしまいます。#を使って下さい。

HTML

<!-- エラーが発生する -->
<a href="#top" data-scroll>一番上まで戻る</a>

<!-- 正常に一番上まで移動する -->
<a href="#" data-scroll>一番上まで戻る</a>

固定ナビがある場合

上部に固定されたナビがある場合、上手く移動できないケースがあります。不具合をなくすために、固定ナビとなる要素(例えば、divなど)に、data-scroll-headerという属性を付けて下さい。

HTML

<!-- 上部の固定ナビ -->
<div data-scroll-header>
	<div>固定ナビ<div>
</div>

BODYの高さを決めない

body要素に、高さが指定されていると、リンクタグから目的の場所までの距離が計算できず、移動に不具合が発生してしまいます。bodyに高さを指定するのを止めるか、または、ライブラリの使用を諦めましょう。これは、既知の問題です。

CSS

/* 不具合が発生してしまう… */
body {
	height: 100% ;
}

カスタマイズ

ここからは上級編です。smooth-scrollを、より自分好みに動作させるための、オプションの指定方法を説明します。

オプションの指定方法

まず、smooth-scrollを起動する時の記述についておさらいしましょう。

JavaScript

// スムーススクロールを起動する
smoothScroll.init() ;

この際、()内に、オプションとなるオブジェクトを指定することで、いくつかの項目を調整することができます。例えば、リンクをクリックしてから、目的の場所に到達するまでの時間は、デフォルトでは500ミリ秒ですが、それを変更するにはspeedという項目の値を指定します。具体的には次の通りです。

JavaScript

// スムーススクロールを起動する
smoothScroll.init({
	speed: 1000 ,	// 目的地に到達するまでの時間を1秒(1000ミリ秒)に変更
}) ;

加えて、ページ内移動をした時に、URLの末尾に#〜が付かないようにするには、updateURLの値に、Boolean値のfalseを指定します。

JavaScript

// スムーススクロールを起動する
smoothScroll.init({
	speed: 1000 ,			// 目的地に到達するまでの時間を1秒(1000ミリ秒)に変更
	updateURL: false,		// URLを[#〜]に変更したくない
}) ;

このように、決められた項目を調整することで、動作をカスタマイズすることができます。調整できる項目は次の通りです。

項目の一覧

調整できる項目は次の通りです。

項目説明
selectorスムーススクロールが適用される属性値。
selectorHeader上部固定ナビとして処理される属性値。
speedクリックしてから目的地まで到達するのにかかる時間(ミリ秒)。
easingアニメーションの種類。
offset到達場所からズラすピクセル値。
updateURLページ内移動後に、URLを変更するか否か。
callbackページ内移動後に、実行される関数。

例えば、全てのオプションを指定して起動すると、次のような記述になります。

JavaScript

// スムーススクロールを起動する
smoothScroll.init({
	selector: '[data-scroll]',				// スムーススクロールが有効なリンクに付ける属性
	selectorHeader: '[data-scroll-header]',		// 固定ナビに付ける属性
	speed: 500,						// 到達するまでの総時間(ミリ秒)
	easing: 'easeInOutCubic',			// スピードの種類
	offset: 0,							// 到達場所からズラすピクセル数
	updateURL: true,					// URLを[#〜]に変更するか?
	callback: function () {}				// コールバック関数 (到達時に実行される関数)
}) ;

アニメーションの一覧

スムーススクロールによる移動は、一定のテンポではなく、例えば、順にスピードが上がっていったり、はたまた、最初は速いけど目的地に近づくにつれて遅くなっていったりなど様々です。easingの項目に、それぞれの名称を文字列として指定することで、スムーススクロールのアニメーションを変更できます。名称をクリックすると、スピードの変化を示す曲線を確認できます。

名称説明
easeInQuadだんだんとスピードが上がる。
easeInCubicだんだんとスピードが上がる。後半、急に上がる。
easeInQuartだんだんとスピードが上がる。後半、とても急に上がる。
easeInQuintだんだんとスピードが上がる。後半、さらに急に上がる。
easeInOutQuad移動開始時と終了時がゆるやかになる。
easeInOutCubic移動開始時と終了時がゆるやかになる。中盤、急に上がる。
easeInOutQuart移動開始時と終了時がゆるやかになる。中盤、とても急に上がる。
easeInOutQuint移動開始時と終了時がゆるやかになる。中盤、さらに急に上がる。
easeOutQuadだんだんとスピードが下がる。
easeOutCubicだんだんとスピードが下がる。前半、急に上がる。
easeOutQuartだんだんとスピードが下がる。前半、急に上がる。
easeOutQuintだんだんとスピードが下がる。前半、急に上がる。

ダウンロード

この記事で説明した内容を、プログラムにして配布します。smooth-scrollのライブラリ自体は、Githubのページからダウンロードして下さいね。

ファイル一覧

SYNCER00247
smooth-scroll.html Download
smooth-scroll.js
fire-smooth-scroll.js Download
smooth-scroll.css Download

ファイル名をクリックすると内容を確認できます。「Download Zip」をクリックするとファイル一式をダウンロードできます。

smooth-scroll.jsはzipファイルの中に含まれていません。

Download Zip