Milky Diary

テーマ「Milky Diary」のデモサイトです♪

簡単カスタマイズ設定③(上に戻るボタン ※スマホ対応)

アイキャッチ画像(簡単カスタマイズ設定③(上に戻るボタン ※スマホ対応))

ブログテーマに含まれている上に戻るボタンを紹介します♪

スマホにも対応しています!

初心者さんもコードの貼り付けだけで立派なメニューをすぐに実装できるようにしてありますෆ(◕ㅂ◕)ෆ💓

実装後のイメージ

右下の灰色のボタンが上に戻るボタンです。

デフォルトでは、ホバーすると薄いピンク色になります。

上に戻るボタン
上に戻るボタン

上に戻るボタン実装用コード

デザイン→カスタマイズ→フッターに以下のコードを追加するだけでOKです。

<!-- 上に戻るボタン -->
<a href="#top" id="page_top"><i class="blogicon-chevron-up"></i></a>
<script>
jQuery(function(){
  jQuery('a[href^="#"]').click(function() {
    var speed = 1000; 
    var href= jQuery(this).attr("href");
    var target = jQuery(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});
$(function() {
    const selecter = $('#page_top');
    selecter.hide();
        $(window).scroll(function () {
         if ($(this).scrollTop() > 200) {
             selecter.fadeIn();
         } else {
             selecter.fadeOut();
         }
    });
});
</script>

ෆ(◕ㅂ◕)ෆ {まるで呪文

色の変更をしない場合は、これで終了です。超簡単!

色の変更

以下のコードをデザインCSSに追加すれば、ボタンの色を変更できます。

#page_top {background: ボタンの色 !important;}
#page_top:hover, #page_top a:hover {background:  ホバーした時のボタンの色 !important;}

不具合などがありましたら、コメントでお知らせください。