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

更新日: 2015/10/25 [更新履歴]
公開日: 2015/02/05

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

サンプルデモ

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

サンプルデモを見る

ライブラリの入手

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

cferdinandi/smooth-scroll: Chris Ferdinandiさんが公開している「smooth-scroll」のページ。画面右側にある「Download Zip」というリンクから、プログラムをダウンロードできます。

ダウンロードしたsmooth-scroll-master.zipを解凍すると、jsというフォルダの中に、smooth-scroll.jsとsmooth-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	だんだんとスピードが下がる。前半、急に上がる。