画面右下によくある「ページトップへ戻る」ボタンのjQueryを使ったサンプルコードです。
目次
スクロールすると表示されてフッターの上で止まる戻るボタン
HTML
headタグ内にCDNを読み込むため下記コードを記載する。最新版を読み込むことを推奨します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><p id="page-top"><a href="#wrap">PAGE TOP</a></p>【ページトップへ戻る】ボタンを追加します。body終了タグの手前などに下記のコードを記載する。
※ボタンはCSSにて位置を固定するため、どこに記載しても問題ありません。
<p id="page-top"><a href="#wrap">ページトップへ戻る</a></p>CSS
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #2796A4;
text-decoration: none;
color: #fff;
width: 60px;
padding: 15px 0;
text-align: center;
display: block;
border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #2796A4;
}※矢印などのアイコンを使いたい場合は FontAwsome などのアイコンフォント導入しましょう。
jQuery
var pagetopBtn = $('#page-top');
pagetopbutton.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pagetopbutton.fadeIn();
} else {
pagetopbutton.fadeOut();
}
});
$(window).scroll(function () {
var height = $(document).height();
var position = $(window).height() + $(window).scrollTop();
var footer = $("footer").outerHeight();
if ( height - position < footer ) {
pagetopbutton.css({
bottom : footer
});
} else {
pagetopbutton.css({
position : "fixed",
bottom: 0
});
}
});
pagetopbutton.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});