php 161013ページトップ実装

Posted 2021-05-05

#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
#pageTop a {
	display: block;
	z-index: 999;
	padding: 8px 0 0 8px;
	border-radius: 30px;
	width: 35px;
	height: 35px;
	background-color: #9FD6D2;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}
#pageTop a:hover {
	text-decoration: none;
	opacity: 0.7;
}

//■page topボタン
$(function(){
	var topBtn=$('#pageTop');
	topBtn.hide();
	//◇ボタンの表示設定
	$(window).scroll(function(){
		if($(this).scrollTop()>80){
			//---- 画面を80pxスクロールしたら、ボタンを表示する
			topBtn.fadeIn();
		}else{
			//---- 画面が80pxより上なら、ボタンを表示しない
			topBtn.fadeOut();
		}
	});
	// ◇ボタンをクリックしたら、スクロールして上に戻る
	topBtn.click(function(){
		$('body,html').animate({
		scrollTop: 0},500);
		return false;
	});
});

<p id="pageTop"><a href="#">page top</a></p>