会社員の資産運用ブログ

共働き会社員パパが米国株中心のインデックス投資信託で資産を増やす話。現在資産1100万円運用中。お金の話を中心に、子供のこと、日常の出来事も記載しています。

【はてなブログ】記事ページの「上に戻る」ボタンの追加方法

スポンサーリンク

 

こんばんは、balbal4です。

ブログを読んでいるとき、記事下まで読み終わったときにちょっと上のほうの過去記事や、カテゴリー毎に記事を探したいな!と思ったことはありませんか?

スクロールで上に戻るのは、正直面倒ですよね。。。

そのときに便利なのが「上に戻る」ボタンです。

このボタンがあるだけで、読み手にはちょっといいサービスを提供することになると思いますので、今回はその設定方法をご紹介します。

 

記事ページの「上に戻るボタン」とは

f:id:balbal4:20190126021217p:plain

記事下にスクロールしていくと表示させるこれ!です。

 

ヘッダのタイトル下に設定

下の図のところのここです。
f:id:balbal4:20190126022925p:plain

ここにソースをコピペします。

 

<!-- 戻るボタン -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- 戻るボタンのスクリプト -->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

フッタに設定

<!-- ページトップに戻る -->
<div id="page-top">
 <a id="move-page-top"><i class="fas fa-arrow-alt-circle-up fa-5x"></i></a>
</div>

<script>
 $(window).scroll(function(){
 var now = $(window).scrollTop();
 if(now > 500){
 $("#page-top").fadeIn("slow");
 }else{
 $("#page-top").fadeOut("slow");
 }
 });

$("#move-page-top").click(function(){
 $("html,body").animate({scrollTop:0},"slow");
 return false;
 });
</script>
<!-- ページトップに戻る終わり -->

 

デザインCSSの設定

/*上に戻るボタン関係*/
#page-top {
 display:none;
 position:fixed;
 bottom:20px;
 right:10px;
 margin: 0;
 padding: 0;
 cursor:pointer;
 z-index: 10;
}

#move-page-top {
 display:block;
 color:rgba(0,0,0,0.4);
 cursor:pointer;
}

#move-page-top:hover {
 color:rgba(0,0,0,0.7);
}
/*上に戻るボタンおわり*/

 

これでおしまいです。

簡単でしょ?

それでは。

最後まで読んで頂きましてありがとうございました。

↓ブログ村ランキングに参加しています。

にほんブログ村 株ブログ 投資信託へ
にほんブログ村