Tweet

Pocket

ページのトップへ移動するトップリンクボタン、ある程度ページを下へスクロールしないと必要ないですよね。ということで、トップリンクボタンを画面が下へスクロールされると表示されるようにJQueryで実装します。

HTML

<p class="topLink"><a href="#top">ページトップへ</a></p>

CSS

.topLink {
　　display:none;
　　width:50px;
　　height:50px;
　　background:url(img/top_link_button.png) no-repeat 0 0;
　　text-indent:-9999px;
　　position:fixed;
　　right:10px;
　　bottom:60px;
　　z-index:2;
}

.topLink a {
　　display:block;
　　width:50px;
　　height:50px;
}

CSSは「position:fixed;」に指定し、「display:none;」で非表示にしておきます。

JQuery

<script>
$(document).ready(function() {
	var pagetop = $('.topLink');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) { // ボタンが表示されるスクロール量（100の部分）
			pagetop.fadeIn(); // fadeIn(500)などとすれば速度指定できる
		} else {
			pagetop.fadeOut(); // fadeOut(500)などとすれば速度指定できる
		}
	});
	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500); // スクロースされる時の速度（500の部分）
		return false;
	});
});
</script>

参考サイト

• jQuery：スクロールで表示されるページトップの実装方法