SIRIUSでトップへ戻るボタンを実装する方法

トップページ＞ SIRIUSのカスタマイズ＞ SIRIUSシリウスカスタマイズや小技＞ SIRIUSでトップへ戻るボタンを実装する方法

SIRIUSでトップへ戻るボタンを実装する方法

物販サイトなどは、スクロールが長いページが多いかと思います。延々とスクロールしないと最後までたどり着きません（汗！

そこから先頭まで戻ろうと思ったら、マウスのスクロールボタンを何回くるくるしないといけないです。

そんな中、ワンクリックで「スルスル～」とトップへ戻れたら、グローバルメニューやサイドメニューをクリックして、他のページを見てくれる確率も高まりますね。

ここでは訪問客のストレス軽減のために、トップへ戻るボタンを実装する方法をご紹介します。

トップへ戻るボタンを実装する方法

当サイトの「ページトップへ戻るボタン」は、画面右下に表示されるように設定しています。画面をある程度下へ進むと現れて、クリックすると、スルスル～っとページの一番上にスクロールしながら戻ってくれます。

今回はjQueryを読み込んでスムーズスクロールさせる方法で実装していきます。初心者さんでも実装できるように、これをここにコピペすればOKですよ～、と簡単にご紹介したいと思います。

作業は必ずテンプレートのバックアップを取ってから行ってくださいね。

jQueryの読み込みとスクロールの記述を追加する

下記のコードをテンプレートのHTMLソース内にある</head>のすぐ上にコピペしてください。トップページだけではなく、カテゴリページ、エントリーページも同じように記述してください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.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>

リンク先は当サイトの場合「container」という「id」になっています。自分のサイトに合わせて「container」や「header」などに変更して下さい。

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

「500」という数字は、スクロールの速度です。数字が小さいほど早くスクロールします。

CSSを追加する

下記のCSSをテンプレートのCSSの最下部にコピペしてください。

/*--ページトップ--*/

.pagetop {
display: none;
position: fixed;
bottom: 30px;
right: 15px;
}
.pagetop a {
display: block;
background-color: #f39800;
text-align: center;
color: #fff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 10px 10px;
border-radius: 20px;

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 10px;
border-radius: 20px;
box-shadow: 5px 5px 5px #AAA;

}

以上のことを実践したらページトップへ戻るボタンの実装ができているはずです。やってみてくださいね。

関連ページ

シリウス（SIRIUS）で2カラムサイドメニュー幅変更方法: デフォルトテンプレートの2カラムサイドメニュー幅変更方法について説明します。
シリウスでサイドメニューのフリースペースを増やす方法: シリウスでサイドメニューのフリースペースを増やす方法について説明します。
SIRIUSシリウスで更新履歴の位置を変更する方法: SIRIUSシリウスで更新履歴の位置を変更する方法について解説していきます。
SIRIUSシリウスで更新履歴の背景画像を変更方法: SIRIUSシリウスで更新履歴の背景画像を変更方法について、解説していきます。
SIRIUSシリウスの更新履歴枠の角を丸くする&影をつける方法: SIRIUSシリウスの更新履歴枠の角を丸くすると影をつける方法について解説していきます。
SIRIUSでカーソルを置くとリンク画像を動かす設定方法: SIRIUSでカーソルを置くとリンク画像を動かす設定方法について、詳しく解説していきます。
SIRIUS サイドバーに画像付きのプロフィールを設置方法: SIRIUS サイドバーに画像付きのプロフィールを設置方法について、詳しく解説していきます。
SIRIUS　クラスの設定機能で蛍光ペンを設定方法: SIRIUS　クラスの設定機能で蛍光ペンを設定方法について、詳しく解説していきます。
SIRIUSに無料でメールフォームを設置する方法: SIRIUS（シリウス）に無料でメールフォームを設置する方法について、詳しく解説していきます。
SIRIUSで記事途中に飾り枠を挿入する方法: SIRIUS（シリウス）で記事途中に飾り枠を入れる方法について、詳しく解説していきます。
SIRIUS　同じページ内で指定の場所にリンクする方法: SIRIUS　同じページ内で指定の場所にリンクする方法について、詳しく解説していきます。
SIRIUSで動くボタンを作成方法: SIRIUSで動くボタンを作成方法について、詳しく解説していきます。
SIRIUSでスクロールの途中でサイドバーが消えないよう固定する方法: SIRIUSでスクロールの途中でサイドバーが消えないよう固定する方法について解明します。
SIRIUSで1つの記事を複数のカテゴリに登録する方法: SIRIUSで1つの記事を複数のカテゴリに登録する方法について説明します。
SIRIUSで蛍光ペンをカスタマイズする: SIRIUSで蛍光ペンをカスタマイズする方法
SIRIUSシリウスの見出しフォントに影をつける方法: SIRIUSシリウスの見出しフォントに影をつける方法を紹介します。
SIRIUSのサイトにYouTube動画を『埋め込み』方法: SIRIUSのサイトにYouTube動画を『埋め込み』方法について紹介していきます。
SIRIUSでGoogleマップをサイトに埋め込む方法: SIRIUSでGoogleマップをサイトに埋め込む方法についてご紹介していきます。
SIRIUSでトップへ戻るボタンに画像を使用する方法: SIRIUSでトップへ戻るボタンに画像を使用する方法について紹介していきます。
SIRIUSで画像を横に自動スライドさせて動かす方法: SIRIUSで画像を横に自動スライドさせて動かす方法を紹介していきます。
SIRIUS(シリウス）で画像を振り子のように左右に揺らす実装方法: SIRIUS(シリウス）で画像を振り子のように左右に揺らす実装方法を紹介します。
SIRIUS(シリウス）で<MAQUEE>タグを使って簡単に画像を動かす: SIRIUS(シリウス）でタグを使って簡単に画像を動かす方法をご紹介します。