SSブログ
無限のリピート ｜イイズナ
Monday October 26 2015　category：blog

『ページトップ』へ戻るボタン

参考にさせていただいたのは
BlackFlagさんの
jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法
です。
ありがとうございました！


スクリプトを貼り付け

管理トップ→デザイン→テンプレート管理→HTML編集を開き、
<head>～</head>
の間に
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
    var showTop = 100;
 
    $('body').append('<a href="javascript:void(0);" id="fixedTop">▲</a>');
    var fixedTop = $('#fixedTop');
    fixedTop.on('click',function(){
        $('html,body').animate({scrollTop:'0'},500);
    });
    $(window).on('load scroll resize',function(){
        if($(window).scrollTop() >= showTop){
            fixedTop.fadeIn('normal');
        } else if($(window).scrollTop() < showTop){
            fixedTop.fadeOut('normal');
        }
    });
});
</script>

と記述します。
保存して、HTML編集を終わらせます。

※かならず今使っているhtmlテンプレートをコピーして、そのコピーのほうに貼り付けて動作確認してください
　何かミスした場合に復元するのが楽になります


CSSの記述

このままでは、ページの一番下にポツンと目立たなく▲が見られるだけなので、CSSでいろいろ指定してあげます。

管理トップ→デザイン→テンプレート管理→CSS編集を開き、
#fixedTop {
    right: 10px;
    bottom: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    display: none;
    background: #000;
    position: fixed;
    z-index: 9999;
    border-radius: 5px;
    -webkit-transform: translateZ(0);
}
#fixedTop:hover {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0.7;
}

と、どこかに貼り付けます。(そして保存)

bottom: 10px;　← 下から何pxのところに表示させるかの調整
　※うちは40pxと指定、10pxのままだとブログのフッターに被ります
color: #fff;　← 文字(▲)部分の色
background: #000;　← ボタンの背景色

白背景、ボタンの境界を線で表現したいのなら、border-radius: 5px; の直前あたりにでも
border: solid 1px #000;
と入れてやるとできます。


記事HTMLの手入れ

このへんは単なる趣味なんですが、ブログトップへのリンクっていらないよね？と思っていたので、思い切って外すことにしました。

管理トップ→デザイン→レイアウト→記事カラムの記事の設定→右上のコンテンツHTML編集を開き、ブログトップ でページ内検索をします。
すると
<span class="archive-links"><a href="<% blog.page_url | html %>">ブログトップ</a></span>
というのが何か所も見つかるので(ほんとにたくさんある)、これをコメントアウトしてやります。
<!-- --> これで囲んだらおしまい。
　※本当に消しちゃうと、あとで戻したくなったときに面倒なので…

<!-- <span class="archive-links"><a href="<% blog.page_url | html %>">ブログトップ</a></span> -->
こんなふうになっていれば表示されません。
あとでやっぱり必要だとなったら、<!-- --> を消せば元通りです。

保存→記事の設定に戻ってさらに設定を保存して、今回はおしまい。
お疲れさまでした



○ タグ：Ringo ブログカスタマイズ
2015-10-26 Mon 12:29
共通テーマ：blog
無限のリピート ｜イイズナ

link

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。