Web制作をしていると実装を求められることがある「ページトップへ戻るボタン」

ケケンタ

今回はそのソースコードをコピペ可能な形で丸っとご紹介します。

この記事でご紹介するソースコードではjQueryは使用していません。
jQueryの読み込みが不要なため、いくらか手軽に使用することが可能です。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

【ver①】ページトップへ戻るボタン｜常に表示ver

「ページトップへ戻るボタン」が常に表示されているバージョンです。

See the Pen ページトップへ戻るボタン【常に表示ver】 by ケケンタ (@lgshifbg-the-looper) on CodePen.

【ver②】ページトップへ戻るボタン｜スクロールすると表示ver

一定量スクロールすると「ページトップへ戻るボタン」が表示されるバージョンです。
スクロール量はJavaScriptで指定します。

See the Pen ページトップへ戻るボタン【スクロールされたら表示】 by ケケンタ (@lgshifbg-the-looper) on CodePen.

解説

ケケンタ

ご興味のある方向けに簡単に解説をします。

【その①】「ページトップへ戻るボタン」のid名

ご紹介した「ページトップへ戻るボタン」はdiv要素で作成しています。

その際、最も重要なのが「id名」です。

先ほどまでのソースコードではid名を「pagetop」とし、そのdiv要素をJavaScriptで取得しています。

<!-- TOPボタン -->
<div id="pagetop" class="pagetop">Top</div>

// TOPボタン
let pageTop = document.getElementById('pagetop');

HTMLとJavaScriptでid名を一致させることが最も重要

【その②】「ページトップへ戻るボタン」内のテキストや画像配置について

繰り返しになりますが、「ページトップへ戻るボタン」はdiv要素のみで構成されています。

ボタンの見た目はすべてCSSで整えており、【その①】でもお伝えしたid名（pagetop）がJavaScript側での要素取得処理と一致していれば、div要素の中身やCSSは自由に改変可能です。

アイコンを設置して見た目を整えてもOK

【その③】「ページトップへ戻る」動きの指定

デモでは、ボタンを押すと滑らかな動きでページトップへ移動しています。

この動きになるよう設定しているのがJavaScriptの以下の部分です。

// TOPボタンがクリックされたらページトップへ遷移する
pageTop.addEventListener('click', () => {
    window.scroll({ top: 0, behavior: "smooth" });
});

behaviorのプロパティを「smooth」と指定することで、いわゆるスムーススクロールの動きになっています。
一瞬でページトップへ戻る動きにしたい場合は「auto」を指定します。

【その④】ボタンがフェードインするまでのスクロール量の指定

「ページトップへ戻るボタン｜スクロールすると表示ver」では

どれぐらいスクロールされたら表示するのかをJavaScriptの以下のハイライト箇所で設定

しています。

window.addEventListener('scroll', () => {
    // スクロール量
    var scrollVolY = window.scrollY;

    /**
     * ページ上端からのスクロール量が
     * 100pxを超えたらTOPボタンを表示する
     */
    if (scrollVolY > 100){
        pageTop.classList.add('visible');
    } else {
        pageTop.classList.remove('visible');
    }
});

ここでは100pxと固定値で指定していますが、例えばメインビジュアルの下辺の位置を取得してそれを指定すれば、メインビジュアルを過ぎたタイミングでボタンが出現するように制御することも可能です。

まとめ

ケケンタ

以上が「ページトップへ戻る」ボタンのご紹介でした！

今回ご紹介したソースコードは極力無駄を省き、機能の最小単位に近い形で記述してあります。

ご使用の際はこちらのソースコードを自由に改変していただき、目的に適した形にカスタマイズしていただければと思います。

このブログではWeb制作やWordPress、PHPの情報を発信していますので、ご興味のある方は他の記事もご覧いただけると嬉しいです。

ケケンタ

それでは、最後までご覧いただきありがとうございました。
この記事が少しでもお役に立ったなら何よりです。

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

• 学習の方向性に迷いがある方
• 効率的にスキルを身につけたい方
• 転職や副業でWeb制作を活用したい方
• 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...

関連記事