【JavaScript】スムーススクロールをjQueryを使わずにシンプルに実装する【Vanilla JS】

以前「ページ内リンクのスムーススクロールのベスト(2017年9月現在)な実装を考える」という記事を書いたのですが、
この記事の中では当たり前のようにjQueryを使用していました。

アニメーションさせるならjQueryを使った方が楽、という思い込みから、jQueryを使わないという事を検討すらしていませんでした。

しかし改めて考えてみると、徐々に古いIEに対応しなくて良くなってきた昨今、最近のJavaScriptの便利なメソッドも使えるようになってきているので、実はプレーンなJavaScriptでもシンプルに実装できるんじゃないかと思い、色々と試してみました。

やはりjQueryは便利に作られているなと実感しつつも、機能を絞ればプレーンなJavaScriptでもまあまあシンプルに書ける事がわかりましたので、紹介したいと思います。

IE10以下の動作確認はしていません。

わかった事

試してみた所、アニメーションを作る時には、まずイージングが大変だという事がわかりました。
スムーススクロールのオプションとしてイージングを色々選択できるようにしようと思うと、プレーンなJavaScriptでシンプルなコードを書くのはどうしても無理があります。

逆に、イージングさえ絞ってしまえば、後は大して難しい記述は無いので、なかなかシンプルに書くことができます。

よく考えてみたら、今までスムーススクロールごときでサイト毎にイージングを変えるような事もしなかったし、
jQueryのデフォルトのイージング”swing”で、クライアント側から文句を言われたこともありません。

という事で、jQueryのデフォルトのイージング”swing”だけに限定して、コードを書いてみました。

jQueryのデフォルトのイージング”swing”限定のスムーススクロール

念のための使い方の説明ですが、下記のコードを、bodyの閉じタグの前に読み込む(<script>タグで囲むか、JSファイルに書いて読み込む)と、#から始まるページ内リンクがスムーススクロールになります。(例:<a href=”#section-1″>テキスト</a>)

オプションとして、
7行目の var duration = 500; は、アニメーションのスピード(ミリ秒)
8行目の  var ignore = '.noscroll' は、#から始まるリンクだけどスムーススクロールを適用させたくない要素のセレクタが指定できます。

例えば、<a href=”#hogehoge” class=”noscroll”>というタグは、スムーススクロールが無視されるようになります。

そして9行目〜の  var easing = ... ですが、
ここでjQueryのデフォルトの”swing”のイージング関数を代入しています。

一応どのイージングを使ってるかを示すために//jswingというコメントを入れていますが、
何故swingじゃなくてjswingなのかと言うと、jQueryのイージングプラグインを入れると、デフォルトのswingがjswingという名前に変わるため、それに合わせています。

この計算式は、jQueryのファイルの中に記述されているイージングの計算式を元にして作りました。
これで本当に合ってるのか実際の所はわからないのですが、検証した感じでは、実際のjQueryのイージングにかなり近い動きをしていると思います。

ちなみに、
グローバル変数を無くすために6行目から (function() { で囲んでカプセル化しているのですが、
1行目〜の  scrollElm は、他のスクリプトでも使う可能性があるので、カプセルの外に出しています。

これも邪魔なようであれば、6行目以降に入れ込んでしまえば良いかと思います。

いつも使ってるスムーススクロールのスクリプトよりは長くなりましたが、jQueryに依存せず、このコードだけでスムーススクロールが動くというのは魅力的ではないでしょうか。

個人的には、普段のサイト制作で使用していたスムーススクロールのスクリプトとこのコードを完全に置き換える事ができます。

しかし、このままでは、もし別のイージングが必要になった時に路頭に迷ってしまいます。
結局jQueryを読み込んで、いつものスムーススクロールのスクリプトに入れ直す事になるのであれば意味がありません。

スムーススクロールのイージングを他のものに変えるという場面は相当少ないと思いますが、可能性は0では無いので、その場合の対応を少し考えてみたいと思います。

イージングを他のものに変えてみる

ひとまず、jQueryのイージングプラグインを少し編集したイージング関数の一覧を載せます。(参考:jQuery Easing Plugin (version 1.3)

イージングプラグインには無いlinerの計算式は、こちらのサイトからいただきました。→ http://gizma.com/easing/

 

この中からイージング関数を選び、先程のスクリプトの9行目の var easing = function (t, b, c, d){... の中身を書き換えます。

例えば、easeOutElasticにしたい場合は、9行目を

にすると、驚くほどエラスティックなスムーススクロールになります。

easeInbounceとeaseInOutBounceだけは曲者で、関数の中で別のイージング関数を使用しているため、少し工夫が必要になります。

例えばeaseInOutBounceにする場合は、下記のようになります。

非常にBounceなスムーススクロールになりました。

他にも、先程linearの計算式で参考にさせてもらった http://gizma.com/easing/ に載っている計算式を入れる事も可能です。

イージングを変更する場合は、このような方法でどうでしょうか。

easeInbounceとeaseInOutBounceの記述が少しやっかいなのが悩み所なのですが、
しかし、スムーススクロールのイージングでこういう奇抜なイージングを使う可能性は限りなく0に近い気がします。

やはり考えれば考えるほど、最初に紹介したjswingだけのスクリプトで事足りる気がします。

ただ、もしかしたら、スムーススクロールごときでも毎回イージングを検討したいという人もいるかもしれません。

そういう方は、下記のように全てのイージング関数を予め用意しておき、使用するイージングが決まったら他の関数を消す、という方法ではどうでしょう。

別に使わないのをわざわざ消さなくてもいいんじゃないかという意見もあると思いますが、
スムーススクロールでここまでの長いコードは必要ないというか、
もし他の人から渡された案件でこのコードが入ってたら、多分腹立つと思います。

という事で、

個人的なスムーススクロールのベスト(2018年1月現在)は、最初に載せたコードで良いんじゃないかなと思っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です