スクロールしたらページ上段へ戻るボタンを表示

様々な表示方法があるが一番シンプルなパターン。スクロールしたらページ上段へ戻るボタン表示させる。jQoeryを使う。

<head>〜</head>内にjquery.min.jsのCDN（もしくはダウンロード）を追加する。

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

フッターにトップへ戻るボタンを追加。

<p id="page-top">
 <a href="#wrap">TO HEADER　
 </a>
</p>

スタイルシートにボタンの表示を設定。文字装飾などはお好みで追加する。

#page-top {
bottom:90px;
right:40px;
position:fixed;/*表示を固定させる*/
}
#page-top a:hover {
color:#666;
}

以下JAVAScriptで表示タイミングやスクロール速度を設定する。

$(function() {
	var topBtn = $('#page-top');	
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 200) {
			topBtn.fadeIn();//スクロールが200に達したらフェードイン表示
		} else {
			topBtn.fadeOut();
		}
	});
    topBtn.click(function () {
		$('body,html').animate({	//スクロールしてトップ
			scrollTop: 0
		}, 500);//スクロール速度
		return false;
    });
});

NOTICES

記事内容は実装させたものがほとんどですが自己責任で参考にしてください。

MEMORANDUM

調べて知り得た情報をせっかくなのでメモしとく

NOTICES