トップに戻るスムーススクロールを生JavaScriptで実装する方法
720 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回はクリックするとページの一番上にスムーススクロールで戻るボタンを生JavaScriptで実装する方法を解説します。
実装方法は簡単なので頑張って理解して使いましょう。
万が一理解できない場合はコピペで使うこともできます。
それでは説明します。
デモサイト
デモサイトはここから見ることができます。
実装内容の仕様
ページの一番下に「Topに戻るボタン」と書かれたボタンがありそれをクリックするとページの一番上にするーっと移動します。
コードとその解説
HTMLとCSSは↓になります。
HTMLは説明が必要ないですがCSSに関しては説明しないといけないことがあります。
今回の実装内容はサイトを作る際に実装することを想定していてサイトを作る時はreset.cssを使うのでCSSに私が普段使うreset.cssを記載しています。
私と同じ内容でなくてもいいので必ずreset.cssを入れてください。
それではJavaScriptの説明をします。
JavaScript
まずHTMLのトップに戻るボタンのid属性を置くためにコードを↓にします。
次にトップに戻るボタンをクリックした時を考えるのでコードを↓にします。
最後にページの一番上に移動するためにコードを↓にします。
7行目の「window.scrollTo」でページの一番上からどこの位置に移動するかとどんな動きをするかを指定することができます。
どの位置に移動するかは8行目の「top」でどんな動きをするかは9行目の「behavior」です。
「top」は0にしていますがこれでページの一番上に移動します。
「top」の単位はpxですが値を変えると移動する位置を変えることができるので気になる人は数値を変えて試してください。
「behavior」はsmoothにしていますがこれでスーッと動きます。
他の指定方法として「auto」がありますがこれだと指定の場所にぴょんって移動します。（感覚が伝えにくいので気になる人は試してください）
これで完成です。