ページトップに戻るボタン、よく必要になりますが、いつも忘れてしまうので、メモです。
Contents
下準備
今から説明するどのパターンでも共通で、以下のように、事前に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;
});
});