この記事にはプロモーションが含まれています。

【コピペOK】ページトップへ戻るボタン【jQuery未使用】

2024-06-29

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

ケケンタ

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

この記事で紹介する「ページトップへ戻るボタン」

常に画面の右下に表示されている
一定量スクロールするとフワッとフェードインする

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

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
会員の自動更新を解除しておく＝期限が来たら自動解約
１～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

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