2020.9.6 jQuery

TOPへ戻るボタンをjQueryで実装する方法

今回はサイトでよく目にするトップへ戻るボタンの実装方法をご紹介します！

1. HTML
2. CSS
3. jQuery
4. まとめ

1. HTML

まずはボタンのhtmlを記述します。

<div id="pageTop"><a class="pageTop__link" href="#"></a></div>

id=”pageTop”	jQueryでボタンを押したときの動作を処理するためにIDを設定します
href=”#”	トップに遷移するための表記

2. CSS

次にcssを実装してみましょう。

▼コピペ用

#pageTop {
	position: fixed;
	bottom: 50px;
	right: 50px;
}
.pageTop__link {
	background: #909090;
	border-radius: 50%;
	display: block;
	position: relative;
	height: 70px;
	width: 70px;
}

.pageTop__link:before {
	content: '';
	border-top: solid 4px #fff;
	border-left: solid 4px #fff;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	height: 14px;
	width: 14px;
}

▼説明用（分かる方は飛ばしてOK）

#pageTop { /* ▼ ページ右下に固定表示する */
	position: fixed;
	bottom: 50px;
	right: 50px;
}
.pageTop__link { /* ▼ ボタンの装飾 */
	background: #909090; /* ボタンの背景色 */
	border-radius: 50%; /* ボタンの角丸を50%にすることで円になる */
	display: block; /* blockにしないと表示されません */
	position: relative; /* ボタンの中の上向き矢印の親に設定 */
	height: 60px; /* ボタンの高さ */
	width: 60px; /* ボタンの幅（円にしたいときは、高さと幅を同じ数値にします） */
}

.pageTop__link:before { /* ▼ ボタンの中の上向き矢印の装飾 */
	content: ''; /* beforeやafterなどの疑似クラスを使用する際は必須 */
	border-top: solid 2px #fff; /* top・left・rotate(45deg)セットで上向き矢印 */
	border-left: solid 2px #fff; /* top・left・rotate(45deg)セットで上向き矢印 */
	margin: auto; /* positionで浮かせたものを上下中央寄せにする際に必須 */
	position: absolute; /* ボタン（親）の子として浮かせる */
	top: 5px; /* ボタン（親）の上からどのくらいかを指定 */
	right: 0; /* ボタン（親）の右からどのくらいかを指定 */
	left: 0; /* ボタン（親）の左からどのくらいかを指定 */
	bottom: 0; /* ボタン（親）の下からどのくらいかを指定 */
	transform: rotate(45deg); /* top・left・rotate(45deg)セットで上向き矢印 */
	-ms-transform: rotate(45deg); /* Internet Explorer用 */
	-webkit-transform: rotate(45deg); /* Google Chrome、Safari用 */
	height: 10px; /* 簡単に言うと矢印の大きさ */
	width: 10px; /* 簡単に言うと矢印の大きさ */
}

3. jQuery

まずはjQueryを動かすための.jsファイルがなければ、下記記述を</body>の直前に記述しましょう。

※すでに.jsファイルが読み込まれている場合は対応不要です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

▼コピペ用

$(function() {
    var pagetop = $('#pageTop');
    pagetop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
    });
    pagetop.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500); //0.5秒かけてトップへ移動
        return false;
    });
});

▼説明用（分かる方は飛ばしてOK）

$(function() {
    var pagetop = $('#pageTop'); //#pageTopをpagetopの変数に格納
    pagetop.hide(); //pageTopを非表示にしておく
    $(window).scroll(function () { //windowプロパティが縦スクロールした座標を取得
        if ($(this).scrollTop() > 100) { //もしwindow topが100超えたら
            pagetop.fadeIn(); //pageTopをフェードインさせる
        } else {
            pagetop.fadeOut(); //もしwindow topが100超えなかったらpageTopをフェードアウトさせる
        }
    });
    pagetop.click(function () { //pageTopをクリックすると
        $('body,html').animate({ //body、htmlのアニメ処理を
            scrollTop: 0 //縦スクロールの座標0にする
        }, 500); //これを0.5秒かけて処理する
        return false;
    });
});