EH’s diary

花・星・月・風景・ゲームなどの写真・動画を中心にアップしていきます。

ページトップへ戻るボタン設置方法

 ボタンを押すとスーっと上に移動してくれる「ページトップへ戻るボタン」を設置しました。

f:id:hakute03:20161217101637j:plain

★設置方法★

 ①「デザイン→カスタマイズ→フッタ」に以下の内容をコピー&ペースト

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
   /** ページトップ処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が200を超えた場合
       if ($(this).scrollTop() > 200) {
           $('#pagetop').fadeIn();
       } else {
           // ページトップへをフェードアウト
           $('#pagetop').fadeOut();
       }
   });

   // ページトップクリック
   $('#pagetop').click(function() {
       // ページトップへスクロール
       $('html, body').animate({
           scrollTop: 0
       }, 300);
       return false;
   });
})(jQuery);
</script>

<a id="pagetop" href="#top" class="page_top" style="display: none;">TOPへ ▲</a>

 

②「デザイン→カスタマイズ→デザインCSS」に以下の内容をコピー&ペースト

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:10px;
    right:10px;
    padding:10px 20px;
    color:#fff;
    font-size:20px;
    text-decoration:none;
    background:#7e7a7a;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

/* ページトップへ戻るボタン:ホバー時 */
#pagetop:hover {
    background:#e74c3c;

}

 

 以上で、記事の下の方へ行くと、「TOPへ」のボタンが出てきて、クリックするとスーっとトップに戻ります。

(設置については、自己責任ということでお願いします。)