jQuery 2014-06-28

jQueryでページトップをコピペでサクッと実装方法する

page-top

今回は、jQueryで作成するページトップ(上部)に戻るスクリプトをご紹介したいと思います。
下記にデモサイトもありますのでご覧ください。

デモサイト

pagetop

当サイトでも実装しているのですが、ページをスクロールすると画面右下部の方にひょっこり出てくる【ページっトップボタン】になります。
縦長のページやランディングページなど長いブログ記事になった時にページ上部に移動したい時にわざわざユーザーにスクロールさせずクリックだけでベージ上部に移動しますので、ユーザービリティも向上すると思います。

実装方法

jQuery本体の読み込み

それでは実装方法ですが、jQuery本体を<head>~</head>内に読み込んでいきます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>

HTMLの記載

次にHTMLのコードを記載していきます。
下記のコードをbodyの最後に記載して下さい。

    <div id="pagetop">
		<a href="#header">ページ上部へ</a>
    </div>

上記のコードのa要素には空のリンク先でも動作致しますし、文字ではなく画像でも構いません。

CSSの記載

次に上記の#pagetopにCSSの記載をしていきます。

#pagetop {
    position: fixed;
    right: 20px;
}

位置などは、お好みで変更して下さい。

jQueryコードの記載

最後にjQueryのコードを記載していきます。

<script>
$(function() {
	    var showFlug = false;
	    var topBtn = $('#pagetop');   
	    topBtn.css('bottom', '-100px');
	    var showFlug = false;
	    $(window).scroll(function () {
	        if ($(this).scrollTop() > 50) {
	            if (showFlug == false) {
	                showFlug = true;
	                topBtn.stop().animate({'bottom' : '20px'}, 200);
	            }
	        } else {
	            if (showFlug) {
	                showFlug = false;
	                topBtn.stop().animate({'bottom' : '-100px'}, 200);
	            }
	        }
	    });
});
	$(function(){
	$("#pagetop a").click(function () {
	        $('body,html').animate({
	            scrollTop: 0
	        }, 800);//上昇するスピード値が大きくなるほど遅くなる
	        return false;
	    });
		});
</script>

以上でjQueryでページトップの完成になります。
とっても簡単に設置出来ますしユーザービリティも向上出来ると思いますので是非まだサイトに設置していない方はこの機会に設置してみてはいかがでしょうか?
また、jQuery Easingなどを使って動きを使って面白くしてもいいかも知れません。

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS scroll-side

初心者も簡単に設置 jQuery サイドバーを固定してスクロールに合わせて追尾

NEXT photoshop-kirakira

僕がオススメしたいPhotoShop キラキラした光り輝く ブラシ5選 フリー