越境ECセミナー
随時開催中!!

❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

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

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

テクニック

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

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

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

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

↓作ってみたもの
DEMO

2021.4.12追記)IE11で使えない記述が混じってましたので、修正しました

方法

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

コードの解説つき

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

 

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

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

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

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

Ninomiya

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