LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

意外と簡単!jQueryを使わずにJavaScriptだけでスムーススクロールを実装する(IE11以上版)

テクニック

意外と簡単!jQueryを使わずにJavaScriptだけでスムーススクロールを実装する(IE11以上版)

スムーススクロールはこれまで以下のようなjQueryを使った方法で実装してきました。

スムーススクロールの記述自体はシンプルですが、この方法では、クロスブラウザの対応のためにユーザーエージェントをもとにブラウザごとのスクロール対象の振り分けが必要でした。つい最近もSafariでは追加の振り分けの対応が必要になっています。

この機会にjQueryに依存しない方法を使おうと思い、JavaScriptだけでスムーススクロールを実装する方法を調べてみました。

↓作ってみたもの
DEMO

方法

実際やってみると、確かにコードは長くなりますが、思ったほど複雑ではなく、
クロスブラウザ対応に至ってはjQueryを使った方法よりも簡潔でした。
ブラウザの標準化が進んできているおかげですね。

コードの解説つき

今後はこちらで実装していきたいと思います。

 

参考にさせていただいたサイト

新しいChromeでスクロールが取れない? scrollingElement? | Ginpen.com

Simple Easing Functions in Javascript – see https://github.com/gre/bezier-easing

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。

資料ダウンロード

送信いただいたメールアドレス宛に、資料のダウンロードURLを送付いたします。