トップへ戻るボタンを簡単5分で実装【jQuery】

カテゴリー：ホームページ制作

スマートフォンサイトなど、スクロールが長いページが多くなってきましたね。
そんな中、ワンタップで「スルスル〜」とトップへ戻る便利な機能をjQueryで簡単に設置しましょう。

jQueryの知識は、ほとんど入りません。

まずは、コピペで！

HTMLの<head>内にjQueryのライブラリを追加します

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

HTMLファイルにトップに戻るボタン「▲」を追加

<p class="pagetop"><a href="#wrap">▲</a></p>

今回は、視覚的に邪魔にならないよう「▲」としました。
もちろん「トップ」などテキスト表記でも構いません。
また、リンク先は今回の場合「wrap」という「id」になっています。
サイトに合わせて「container」や「header」などに変更して下さい。

HTMLファイルにJavaScripを追加

<script>
$(document).ready(function() {
  var pagetop = $('.pagetop');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 100) {
            pagetop.fadeIn();
       } else {
            pagetop.fadeOut();
            }
       });
       pagetop.click(function () {
           $('body, html').animate({ scrollTop: 0 }, 500);
              return false;
   });
});
</script>

上記の
「100」という数字は、上から何px スクロールしたら表示させるのかを指定しています。
今回は「100px」です。
「500」という数字は、スクロールの速度です。数字が小さいほど早くスクロールします。

CSSで調整

.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
    background-color: #b2d1fb;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

簡単ですね。

コンテンツの邪魔にならないように透過のボタンにしています。
是非、お試し下さい。
＊IEは10以上で確認済です。