ウェブデザイナーのお仕事のメモ - mainichi web まいにちウェブ

twitter

作成日:2022.04.08  最終更新日:2022.05.13

js

ページトップに戻るボタンを動かすためのjQueryの書き方メモ

ページトップに戻るボタン、よく必要になりますが、いつも忘れてしまうので、メモです。

下準備

今から説明するどのパターンでも共通で、以下のように、事前にjQuery本体を読み込んでおきます。

<!-- js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

【基本】固定されているページトップに戻るボタン

ページの下のほうに固定されている状態のページトップに戻るボタンの書き方です。

HTML

HTMLはaタグで以下のように書きます。

<a id="pagetop" href="#">↑pagetop↑</a>

CSS

cssはご自身のデザインに合わせて変えてください。絶対に必要、というようなcssはありません。

JS(jQuery)

JSは以下のように書きます。500の部分は、0.5秒という意味です。なので、ここの数字を適宜変えることで、スクロールのスピードが変わってきます。

$('#pagetop').click(function () {
 $('body,html').animate({
 scrollTop: 0
 }, 500);
 return false;
});

【応用】スクロールしたら表示されるページトップボタン

少しスクロールしたら、右下の固定の場所に表示されるページトップボタンです。

HTML

基本のものと同じです。

<a id="pagetop" href="#"><span>↑</span></a>

CSS

ボタンを左下に固定するcssを書きます。ボタンのサイズや色など、デザイン的な要素は適宜変えてください。

#pagetop {
 position:fixed;
 bottom:10px;
 right:10px;
 display:block;
 background:#008b8b;
 color:#fff;
 width:70px;
 height:70px;
 border-radius:35px;
 text-align:center;
 line-height:70px;
}

JS(jQuery)

最初にページトップボタンを非表示にして、スクロールしたら表示する、という処理を書いています。

$('#pagetop').hide();

$(window).scroll(function () {
 if ($(this).scrollTop() > 300) {
 $('#pagetop').fadeIn();
} else {
 $('#pagetop').fadeOut();
}
});

$('#pagetop').click(function () {
 $('body,html').animate({
 scrollTop: 0
}, 500);
 return false;
}); 

HTML

基本のものと同じです。

<a id="pagetop" href="#"><span>↑</span></a>

CSS

ボタンを左下に固定するcssを書きます。ボタンのサイズや色など、デザイン的な要素は適宜変えてください。

#pagetop {
 position:fixed;
 bottom:0;
 right:0;
 display:block;
 background:#008b8b;
 color:#fff;
 width:70px;
 height:70px;
 text-align:center;
 line-height:70px;
}

js(jQuery)

以下のようになります。

$(function(){
var pagetopBtn = $('#pagetop');
pagetopBtn.hide();

$(window).scroll(function () {
	if ($(this).scrollTop() > 100) {
		pagetopBtn.fadeIn();
	} else {
		pagetopBtn.fadeOut();
	}
});

$(window).scroll(function () {
	var height = $(document).height();
	var position = $(window).height() + $(window).scrollTop();
	var footer = $("footer").outerHeight();
	if ( height - position  < footer ) {
		pagetopBtn.css({
			bottom : footer
		});
	} else {
		pagetopBtn.css({
			position : "fixed",
			bottom: 0
		});
	}
});


pagetopBtn.click(function () {
	$('body,html').animate({
		scrollTop: 0
	}, 500);
	return false;
});
});

Ranking

まだデータがありません。