【jQuery】TOPへ戻るボタンでスクロールさせる！！

javascript

ブログとか縦に長いサイトだとよくスクロールしていくとフワッと「ページトップへ」というボタンが現れたりします。まぁWordpressでは、プラグインも多々あると思いますが、
自作してしまったほうが、楽だったりするのでそれをメモ。

何がしたいのか

とりあえずは、ページをスクロールしていったら画面の右下にふわっとボタンが表示されてボタンをクリックするとトップにスクロールのアニメーションをやってみたいと思います。

まぁこの手のネタはごろごろしてるので、コード自体は同じだったりしますが、下記がサンプルです

画面の右下に表示させる

html

html側でとりあえずフッターあたりでも構わないですが、記述します。


	
TOPへ戻る

CSS

画面の右下に表示させるために絶対配置にして、装飾は角丸のグレーにでもしておきます。


#page-top {
	position: fixed;
	bottom: 40px;
    right:5px;
	font-size: 10px;
}
#page-top a {
	background: #665e53;
	text-decoration: none;
	color: #fff;
	width: 80px;
	padding: 10px 5px;
	text-align: center;
	display: block;
	border-radius: 3px;     /* CSS3 */
    -moz-border-radius: 3px;    /* Firefox */
    -webkit-border-radius: 3px; /* Safari,Chrome */
}
#page-top a:hover {
	text-decoration: none;
	background: #d6cdc0;
        color:#665e53;
}

jQueryによるスクロール

とりあえずjQueryのコードを全部載せます。


jQuery(function() {

	//１：ボタンを最初は隠しおく
    var pageTop = $('#page-top');
    pageTop.hide();
    
	//2：スクロールイベントで表示・非表示させる
    $(window).scroll(function () {
        if($(this).scrollTop() > 400) {
            pageTop.fadeIn();
        } else {
            pageTop.fadeOut();
        }
    });
	
    //3：クリックでトップへ戻る
    pageTop.click(function () {
		$('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
	
});

１：ボタンを最初は隠しおく

ボタンオブジェクトを取得してhideメソッドで非表示にしておく。

2：スクロールイベントで表示・非表示させる

scrollイベントでウィンドウのスクロール値が400以上にスクロールされた場合にfadeInメソッドで表示させ、それ以外（400以内）になったらfadeOutメソッドで非表示にする。

3：クリックでトップへ戻る

ボタンをクリックしたらanimateメソッドでscrollTopプロパティを0にすることでトップへアニメーションしながら戻る。