ページの先頭へ戻るボタン | SIRIUSシリウスjavascript

トップページ＞ Java scriptとの組合せ＞ページの先頭へ戻るボタン

～お知らせ～
要望にお応えしLUREA購入特典もSIRIUSと同じ特典にしました！
購入特典にオリジナルテンプレートを追加しました！

ページの先頭へ戻るボタン実装

このサイトのフッター部分には、
ページ先頭ボタンが実装されていますが、
（その記事はこちら）
今度はjavascriptを実装させてカッコよくスルスルとページ先頭に戻すボタンの
設置方法をご紹介します。

このサイトでも記事を下にスクロールしていくと、
画面右下に”このページの先頭へ”というボタンが出現しますね。

押してみると上までビューンと戻ってくれます。
フッター部への設置は最後まで行かないと、上に戻れませんが
今回の方法であれば記事途中でも上に戻れますね♪

では手順です！

手順１

編集メニューからHTMLテンプレートをクリックします。
HTMLテンプレート選択

手順２

＜/head＞の上に下記をコピペします。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<p class="pagetop"><a href="container">このページの先頭へ</a></p>

<script type="text/javascript">
$(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>
</head>

これを、トップページ、カテゴリ、エントリー・・と全ページに記入します。

手順３

編集メニューからスタイルシートをクリックします。
スタイルシートを選択

手順４

最後のほうに下記をコピペします。

/*--先頭に戻る--*/
.pagetop {
display: none;
position: fixed;
bottom: 0px;
right: 15px;
}
.pagetop a {
display: block;
background-color: #5565c7;
text-align: center;
color: #fff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 10px 20px 10px;
border-radius: 30px 30px 0px 0px;
box-shadow: 5px 5px 5px #AAA;
}
.pagetop a:hover {
display: block;
background-color: #1e50a2;
text-align: center;
color: #fff;
font-size: 12px;
text-decoration: none;
padding: 10px 20px 10px;
border-radius: 30px 30px 0px 0px;
box-shadow: 5px 5px 5px #AAA;
}