【TOPへ戻る】ボタンをやっとつけれた！

＊【追記】2016.2.5　事情があり【TOPへ戻る】ボタンを変更しました。

どうもです。

やっとできました。疲れた。。。

【TOPへ戻る】ボタンをつけたくて色々調べてみたのですが、

情報量が多過ぎてテンパりました。

僕みたいな初心者には理解不能な単語がいっぱい。

目が限界を迎えそうなところでやっと初心者にもわかる説明を見つけました。

助かりました。感謝！！

参考にさせて頂いたブログです。

ありがとうございます。

to-torinos.hatenablog.com

この方法が一番わかりやすかったです。

僕のブログページを少し下にスクロールすると、

右下に出てくる【TOPへ戻る】のボタンがあると思いますが、

今回はこのボタンを追加しました。

上記の「トリノスさん」の記事にも書いていますが、

ボタンの設置方法です。

1.  HTMLのテキストボックスに以下をコピペ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
$(function () {
   $(window).scroll(function() {
       if ($(this).scrollTop() > 400) {
           $('#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>

【トリノスさん】の記事にあるコードをそのまま引用させて頂いてます。

テキストボックスの場所は、

「デザイン」→「カスタマイズ(スパナマーク)」→「フッタ」→「HTMLを記述」

にあるテキストボックスに上記コードを貼り付けてください。

400がどこまでスクロールしたらボタンが出現するか の数値で、

300がTOPに戻る時のスピード

▲ TOPへ戻るの部分にはボタンに表示したい文字を入れれるみたいです。

　　　２. CSSのテキストボックスに以下をコピペ

#pagetop {
    position:fixed;
    bottom:10px;
    right:10px;
    padding:10px 20px;
    color:#fff;
    font-size:15px;
    text-decoration:none;
    background:#000;
    border-radius:5px;
    background-color:rgba(0,0,0,0.3);
}
#pagetop:hover {
    background:#ffdd00;
}  

テキストボックスの場所は、

「デザイン」→「カスタマイズ」→最下部の「デザインCSS」

のテキストボックスに上記コードを貼り付けてください。

border-radiusがボタンの角を丸く

background-color:rgbaが背景色の不透明度を設定するものだそうです。

これでボタンの設置ができたのですが、

ボタン上にマウスを置いた時の色を変えたくてコードを恐る恐るいじってみました。

上記のコードでは僕の設置しているボタンと色が違うはずです。

最下部に記述されている、

 #pagetop:hover {
    background:#ffdd00;
} 

この部分のコードの赤い数字を変更したら色を変えることができました。

僕は色のコードすらわからなかったので、「＃ffdd00 色」とGoogleで検索したら

すごく便利なサイトがありました。

www.color-sample.com

調べればなんでも出てきてほんとに便利な世の中です。笑

ということで無事に【TOPへ戻る】ボタンを設置することができました。

記事が長くなることがある場合はこのボタンは絶対必要ですね。

まだの方はぜひ設置してみてください。

以上、最後までありがとうございました。