© Style-5.net
 

プラグインを使わずページトップへ戻る jQueryスクロール

プラグインを使わずにjQueryでエフェクト付きのページトップへ戻るスクロールを実装します。

DEMOページ


Script
<script type="text/javascript">

$(document).ready(function() {
	 //最初は表示させないように
	$("#back-top").hide();

	 //スクロールされて	
	$(window).scroll(function () {
		//300pxいったら
		if ($(this).scrollTop() > 300) {
			//フェードインで表示させる
			$('#back-top').fadeIn();
		//300pxいかなかったら
		} else {
			//隠す
			$('#back-top').fadeOut();
		}
	});

	 //表示をクリックしたら	
	$('#back-top a').click(function () {
		//スムーズに上に戻る
		$('body,html').animate({
			scrollTop: 0
		}, 800);
		return false;
	});
});

</script>

CSS

テキストのみで表示する場合

#back-top {
        bottom: 20px;  //下から離す位置
        right: 50px; //右から離す位置
        position: fixed; 
}
        or(もしくは)

背景をつけて表示する場合

#back-top {
        padding: 2px 5px; 
        bottom: 20px; 
        right: 50px;
        background: #ccc;
        position: fixed; 
}

背景に角丸を負荷する場合は以下を追記

        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;


HTML
<p id="back-top"><a href="#top">To Top</a>

他、マウスオーバーで色の変化等のアクションを加えることも可能