CSSだけでも実装できる!ページ内アンカーやページ上部にアニメーションでスクロールさせるCSS, JavaScriptのまとめ

ページ内のアンカーやページの上部にアニメーションで、スムーズにスクロールさせるCSS、単体のJavaScript、Vue.jsやjQueryのプラグインを紹介します。

現在では、CSSだけでも実装できるようになりました。IEは例のごとく非対応ですが、ポリフィルがあるので利用できます。

ページをアニメーションでスクロールさせる、CSS, JavaScriptのまとめ

イラスト: Girls Design Materials

CSSでページをアニメーションでスクロールさせる

CSSのプロパティ「Scroll-behavior」を使用すると、アニメーションを使用してスムーズにスクロールさせることができます。

サイトのキャプチャ

Scroll-behaviorのサポートブラウザ
scroll-behavior -MDN web doc
scroll-behaviorの実装例(チェックボックスをオンで)

2018年現在、対応ブラウザはChrome, Firefoxのみですが、ポリフィルも用意されているのでIEなどで使用することも可能です。

Scroll-behaviorプロパティの値

値にはキーワードを指定します。
「auto」は通常のスクロール、「smooth」はスムーズにスクロール。

実装方法

アンカー先に「scroll-behavior: smooth;」を適用します。

サイトのキャプチャ

Smooth Scroll behavior polyfill
Smooth Scroll behavior polyfill -GitHub
デモページ

CSSのプロパティ「Scroll-behavior」のポリフィル。
ネイティブでサポートされているChrome, Safari、サポート外のIE9+, Edge12+, Safari6+, Operaで動作します。

実装方法

当スクリプトを外部ファイルとして記述し、トップに戻るリンクやスクロールさせる要素を配置します。

ページの最下部、何px移動、指定要素に移動なども定義できます。

JavaScript単体でページをアニメーションでスクロールさせる

サイトのキャプチャ

Simple Scroll Up
Simple Scroll Up -GitHub
デモページ

単体で動作するスクリプト。ページの先頭に戻るときにスクロールをアニメーションさせます。

実装方法

当スクリプトを外部ファイルとして記述し、ページの先頭に戻るリンクを配置します。

オプション

オプションではアニメーションの種類(easing)や持続時間(duraction)、ボタンが表示される上端からの距離(height-hide)を定義できます。

サイトのキャプチャ

Smooth Scroll -GitHub
デモページ

単体で動作するスクリプト。ページ内アンカー・ページの先頭に戻るときにスクロールをアニメーションさせます。アンカーは、2バイト文字にも対応。

実装方法

当スクリプトを外部ファイルとして記述し、ページ内アンカー・ページの先頭に戻るリンクを配置します。

オプション

オプションではアニメーションの種類を変更したり、固定ヘッダに対応させることも可能です。

サイトのキャプチャ

dyScrollUpJS -GitHub

単体で動作するスクリプト。
ver.1ではjQueryのプラグインでしたが、先日リリースされたver.2からjQueryは不要になりました。

実装方法

当スクリプトを外部ファイルとして記述し、ページの先頭に戻るリンクを自動で配置します。

オプション

オプションではアニメーションやリンクのデザインを変更できます。

プラグインでページをアニメーションでスクロールさせる

サイトのキャプチャ

Vue Backtotop Component -GitHub
デモページ

Vue.jsのコンポーネント。クリックするとページの上部にスクロールされます。

実装方法

npmでインストールします。

vue-backtotopのコンポーネントに独自のHTMLを記述することができます。

サイトのキャプチャ

Material ScrollTop Button
Material ScrollTop Button -GitHub
デモページ

jQuery 1.7+のプラグイン。Material Designで見かけるページをスクロールすると、右下にボタンが表示され、クリックで上部にスクロールします。

実装方法

当スクリプトを外部ファイルとして記述し、ページの先頭に戻るリンクを配置します。

オプション

オプションではアニメーションやリンクのデザインを変更できます。

サイトのキャプチャ

ScrollUp
ScrollUp -GitHub
デモページ

jQueryのプラグイン。ページをスクロールすると、右下にボタンが表示され、クリックで上部にスクロールします。

実装方法

当スクリプトを外部ファイルとして記述し、ページの先頭に戻るリンクを自動で配置します。

オプション

オプションではアニメーションやリンクのデザインを変更できます。

sponsors

top of page

©2018 coliss