たったの10秒でできる!jQueryで実装する「ページトップへ戻るボタン」

たったの10秒でできる!jQueryで実装する「ページトップへ戻るボタン」

更新日:カテゴリ:Webデザイン

たったの10秒でできる!jQueryで実装する「ページトップへ戻るボタン」

ページをスクロールするとフワッとフェードインする「ページトップへ戻るボタン」をたったの10秒で実装してしまいます。

jQueryで実装する「ページトップへ戻るボタン」

今回ご紹介するものは、スクロールするとフワッとフェードインしてボタンが出てきて、ボタンを押すとスルスルッとページトップに戻るものです。とても10秒クオリティーとは思えないものなのでご安心を。

HTML

<a id="pageTop" href="#contents">ページトップへ</a>

CSS

#pageTop{
	background:#DDD;
	border-radius:5px;
	color:#FFF;
	padding:20px;
	position:fixed;
	bottom:20px;
	right:20px;
	}
#pageTop:hover{
	background:#EEE;
	}

JavaScript

<script type="text/javascript">
$(function() {
	var topBtn = $('#pageTop');
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
    topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 1000);
		return false;
    });
});
</script>

scrollに書かれている100というのは、画面の上部から100スクロールするとボタンを表示するという記述になるので、数字を変えることでボタンが表示されるタイミングを変更できます。

animateに書かれている1000というのは、1000(1秒)かけてページトップに戻るという記述になるので、数字を変えることでページトップに戻るスピードを変更できます。

この記事に関連するタグ

あわせて読みたい記事