ページトップへボタン

jQuery

jQueryを用いたページトップへのボタンの作り方です。
こちらも最近のサイトにはよく実装されています。

 

ページを下へ1画面分スクロールするとボタンが表示され、戻ると消えるようになっています。

 

このサイトでも右下に出るものが実装されていますが、このコードで書いた動作サンプルは左下に出るようにしてあります。

 

ボタンを右下にする場合は、cssの

right: 2em;

left: 2em;

に書き換えてください。

 

$(function() {
	var winHeight = $(window).resize().height();
	var topBtn = $('#pagetop');	
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > winHeight) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
});
#pagetop{
	position: fixed;
	bottom: 2em;
	right: 2em;
	display:none;
	z-index:9996;
	font-size:13px;
}
#pagetop a {
	background: #9CF;
	text-decoration: none;
	color: #fff;
	width: 4em;
	height: 1em;
	padding: 1.5em 0;
	line-height:1.2em;
	text-align: center;
	display: block;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	opacity:0.7;
	filter: Alpha(Opacity=70);
	-ms-filter: Alpha(Opacity=70);
}
#pagetop a:hover {
	text-decoration: none;
	opacity:0.6;
	filter: Alpha(Opacity=60);
	-ms-filter: Alpha(Opacity=60);
}
<div id="pagetop">
<a href="#">∧</a>
</div>

 

 

前にご紹介したものと組み合わせると、ページトップまでスクロールして戻ります。

ページ内リンクへのスムーススクロール
通常、ページ内リンクをクリックするとパッとその場所へ移動します。 最近のサイトには導入されているものが多い、スクロールするように移動する機能を追加するjqueryコードです。 動作サンプル 下に移動します ...

コメント