PAGE TOP

スクロールするとぴょこっと出てくるページトップへ戻るアイコンを実装するjQuery「backtotop.js」

トップへ戻るボタン

ブログなどでもよく見かけるページトップへ戻るリンクを、画面右下に配置するjQueryプラグインです。
コンテンツを設定量スクロールすると、画面外からぴょこっと出てくるもので、出すものについては画像やテキストなどcssで好きに装飾できるので単純でわかりやすい使用感です。

当ページでは画像を使って実装しています。

pagetop

jQueryコード

$(function() {
	var showFlug = false;
	var topBtn = $('#page-top');	
	topBtn.css('bottom', '-100px');
	var showFlug = false;
	//スクロールが500に達したらボタン表示
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			if (showFlug == false) {
				showFlug = true;
				topBtn.stop().animate({'bottom' : '20px'}, 200); 
			}
		} else {
			if (showFlug) {
				showFlug = false;
				topBtn.stop().animate({'bottom' : '-100px'}, 200); 
			}
		}
	});
	//スクロールしてトップ
    topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
    });
});

DOWNLOAD

上記コードを外部ファイル化してヘッダに読み込ませます。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="<?php bloginfo('template_url')?>/js/backtotop.js"></script>

CSS

#page-top {
	position:fixed;
	bottom: 20px;
	right: 20px;
}
#page-top a {
	background:url(画像のURL) no-repeat;
	width: 80px;
	height:50px;
	display: block;
	text-indent:-9999px;
}
#page-top a:hover {
	opacity:0.6;
	filter:alpha(opacity=60);
}

HTML

/*body直下に記述*/
<p id="page-top"><a href="#top">PAGE TOP</a></p>

ページを500pxほど下にスクロールした時点で、ブラウザ右下に「PAGE TOPへ」のアイコン画像が現れ、クリックするとスクロールしながらページ上部へ戻ります。


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •