＜広告＞

HTML jQuery

【jQeury】トップへ戻るボタンを右下に固定表示させる方法

Webサイトで１ページが長くなってしまった時に、右下に「トップへ戻る」ボタンをつけておくと非常に便利です。

スクロールしても必ず右下に表示されるようにCSSで固定し、jQeuryでトップへ滑らかに移動します。

投稿者「みか」自己紹介

  • パソコンとデータベースが大好き
  • 自社でネットワーク・システム・機器管理、Webサイト構築
  • 自社向けのシステムをMicrosoft AccessやPHPで多数構築
  • Excelでの作業はVBAを使って効率化
  • ロックバンド「VARS」でベース担当
  • 「VARS」のWebサイト、ブログも構築
  • 「VARS」のライブを観に来てね！https://vasofatum.jp/live/

HTMLの記述

ボタンの要素を aタグで追加します。

<a id="page_top">▲<⁄a>

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="page_top.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="page_top.js"></script>
<title>トップページボタン</title>
</head>
<body>
<a id="page_top">▲</a>
<p>
    あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>
    い<br>い<br>い<br>い<br>い<br>い<br>い<br>い<br>い<br>い<br>
    う<br>う<br>う<br>う<br>う<br>う<br>う<br>う<br>う<br>う<br>
    え<br>え<br>え<br>え<br>え<br>え<br>え<br>え<br>え<br>え<br>
    お<br>お<br>お<br>お<br>お<br>お<br>お<br>お<br>お<br>お<br>
    か<br>か<br>か<br>か<br>か<br>か<br>か<br>か<br>か<br>か<br>
    き<br>き<br>き<br>き<br>き<br>き<br>き<br>き<br>き<br>き<br>
    く<br>く<br>く<br>く<br>く<br>く<br>く<br>く<br>く<br>く<br>
    け<br>け<br>け<br>け<br>け<br>け<br>け<br>け<br>け<br>け<br>
    こ<br>こ<br>こ<br>こ<br>こ<br>こ<br>こ<br>こ<br>こ<br>こ<br>
</p>
</body>
</html>

CSSの記述

「position」を「fixed」に設定し、ボタンの位置を固定にします。

position: fixed;

「bottom」「right」を「20px」に設定し、ボタンの位置を下から20px、右から20pxに設定します。

bottom: 20px;
right: 20px;

CSS

p{
    text-align: center;
}
#page_top{
    position: fixed;
    padding: 10px;
    bottom: 20px;
    right: 20px;
    background-color: #e0ebaf;
    font-size: 20px;
    cursor: pointer;
}

jQeuryの記述

ページを表示した時に、「hide」を使ってボタンを非表示にします。

toTopBtn.hide();

スクロールされたら、「fadeIn」を使ってボタンを表示します。

toTopBtn.fadeIn();

ボタンがクリックされたら、「animate」で0.5秒かけ、「scrollTop」を使って画面の一番上へ移動させます。

$('body,html').animate({
  scrollTop: 0
}, 500);

JavaScript

$(function(){
    var toTopBtn = $("#page_top");
    // 表示時はボタンを非表示
    toTopBtn.hide();

    // スクロールしたら表示
    $(window).scroll(function(){
        toTopBtn.fadeIn();
    });

    // トップへ戻る
    toTopBtn.click(function(){
        $('body,html').animate({
            scrollTop: 0
        }, 500);    // 0.5秒でトップへ
        return false;
    });
});

▼ページ読み込み時、ボタンは表示されていません。

▼スクロール時、ボタンが表示されました。

▼ボタンをクリックしたら、一番上へ移動しました。

＜広告＞

-HTML, jQuery
-, , , ,