電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

JavaScriptで「TOP画面へスクロールして戻るボタン」の実装方法

calendar

前回、スクロールするとメニューボタンがふわっと表示される方法についてまとめました。↓

 

今回は、ボタンをクリックするとページの先頭(一番上)までスクロールして戻るプログラムをJavaScriptで実装する方法についてまとめようと思います。

※完成はこんな感じになります。↓

 

いままでネイティブなJavaScriptで記述してきましたが、今回は結構複雑になるので、「Anime.js」というアニメーションに特化したライブラリを使用します。

ライブラリを使えば、スクロールの記述がかなり簡単になります。手順としては、

①html/cssでボタンの配置

②JavaScript(anime.js)でスクロールイベント処理を記述

これだけになります。

スポンサーリンク

始めに

それでは、下記から「Anime.js」のライブラリをDLしてください。

Anime.js

入門の手動DLから入手できます。

ファイル解凍後、libディレクトリ内にある「anime.min.js」を取り出し、htmlのscript src先に格納しておきます。

html

main終了タグ前のmove id 要素が今回のtopへ戻るボタンとします。

body閉じタグ前に、先ほどDLしたanime.min.jsのsrc先を記述します。これでネイティブなJavaScriptの中でanime.jsのライブラリを利用することが可能になります。

他の記述は適当ですので無視してください。

CSS

.topmoveで戻るボタンの位置等をスタイルしています。

一応下にスクロールすると戻るボタンとmenuがふわっと表示されるようになっていますが、そこの説明は割愛します。※冒頭の過去記事でまとめています。

その他の記述は無視してOKです。

JavaScript(Anime.js)

コメントアウトしている部分が、ライブラリを使用した記述部分になります。

戻るボタンのクリックイベント発生後に、ライブラリのスクロール処理が実行されます。

記述は、

anime ( { 処理内容 ) } ;

で表します。

今回の場合だと、

targets: “html, body”,  ⇒ html,body要素全体を指定

scrollTop: 0, ⇒ top(一番上)までスクロールを指定

dulation: 600,  ⇒ スクロールする時間(600ms)

easing: ‘easeOutCubic’, ⇒ 移動速度のメリハリ(何種類かあります)

以上です。たったこれだけの記述で、画面のスクロールを実装できちゃいます。

他にも色々アニメーションがあるみたいですので、かなり便利なライブラリだと思います。是非お試しください。