jQueryでスムーズスクロールを心地よくする！

ページ内リンク、例えば目次とかをクリックしてするするっと移動するアレありますよね！

スムーズスクロールまたはスムーズスクロールと言われているスクロールです。

今回はそんな心地いいスムーズスクロールを実装する話です。

参考にしたサイト

楽天goldでページを作成する際、前々からスムーズスクロールは実装してたんですが、ガッーーーと単調にページが流れていくスムーズスクロールが気に入らなかったんです。

なぜって？

美しくないからさっ！！

（あと、目疲れるし。）

なので一生懸命美しいスムーズスクロール探しました！

、

、

、

見つかりましたよ。

参考にしたのはモスバーガー公式サイトです。

言葉で説明するの難しいんですが最初”ぱっ”といって、終わりに”すっ”となる大変美しい！そして心地いい！スムーズスクロールです。

イージングアニメーション

コードを調べると、イージングのアニメーションを“easeOutExpo”という値に指定しているのが肝のようです。

イージングとは進み具合のことです。

単調な動きじゃなく加速したり減速したりして進んでいくんですね。

Easing Function 早見表は各イージングが早わかりですので参考にしたいときにおすすめ！

実装する

それでは実装の仕方を見ていきましょう！

jQuery

まずはjQueryをインストールしましょう！

ローカルの楽天goldに置いても良いですが、CDNの利用がおすすめです。

jQueryのCDNはGoogle、Microsoft、jQueryなどがありますが、中国で表示崩れの原因はjQuery!?で述べた理由で僕はjQueryのCDNを使っています。

中国で表示崩れの原因はjQuery!?

ecmemo.net

2018.07.29

jQuery.easing

jQuery.jsでは”liner”,”swing”の2種類のイージングしか指定できません。

先ほど紹介したイージングアニメーションの“easeOutExpo”を指定するために必要になるのがjQuery.easing.jsです。

こちらもjqueryと同様、CDNが用意されているので使いましょう！

Javascript

アニメーションの長さやイージングの指定をします。

こちらをjQueryとjQuery.easingを読み込んだ後に<script>タグで読み込みます。

その他

今回紹介したスクロール、ページが長ければ長いほど効果を発揮します。

なぜなら、より早くアンカーリンクに到達できるからです。

過ぎ去るページを長々とユーザーに見せるのは不快でしょうから。

スクロール最後に少しアニメーションしてるのを見せるくらいが丁度いいんです！

デモ

イメージしやすいよう簡単なデモを用意しました。

“easeOutExpo”の部分を”easeInOutCirc”や”easeOutBounce”などに変更することで、スムーズスクロールのアニメーションが変化します。

Easing Function 早見表を参考に色々試してみてください。

See the Pen smooth scroll by ざきひー (@zakihiii) on CodePen.0

まとめ

単調なスムーズスクロールよりも、美しく心地いいスムーズスクロールになりました。

また、アニメーションのイージングは好きに変更できますので、ページに合ったスムーズスクロールを実装するのもいいと思います。

元々アニメーションを心地よくするための変更でしたが、ユーザーへのメリットにもなる今回のスムーズスクロール、よろしければ参考にどうぞ！

それでは今回はこのへんで。

以上！