【はてなブログ】CSSで「トップへ戻る」ボタンを作成する方法

PC画面やスマートフォンの画面の端に”↑”のアイコンがセットしてある事ってありますよね？

触るとページの一番上まで自動でスクロールしてくれるあれです！！

今回はトップへ戻るボタンの簡単な作り方ご紹介していきたいと思います！！

f:id:DwarfRabbit:20200217135347j:plain

「トップへ戻る」の作り方
プレビュー
上にスクロールされない場合の対処法
レスポンシブ対応について
最後に

「トップへ戻る」の作り方

作成手順

必要な3ステップ

HTMLの記述:(ボタンを配置するための土台)
javascriptの記述:(ボタンを押したときの動作の設定)
CSSの記述:(ボタンのサイズや配置位置、色などの設定)

フッターにHTML・javascriptを記述

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>

<div id="page-top">
<a id="move-page-top"><i class="fa fa-chevron-circle-up"></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(){
/* alert( '画面に表示させたい値' );*/
$("html,body").animate({scrollTop:0},"slow");
});
</script>

CSSの記述

/*フッタの上に戻るボタンに対する設定*/
#page-top{
/*display:none;*/
position:fixed;
right:10px;
bottom:40px;
margin: 0;
padding: 0;
text-align:center;
font-size: 55px;

}

#move-page-top{
color:rgba(0,0,0,0.4);/*color:rgba(R値,G値,B値,透明度)*/
text-decoration:none;
display:block;
cursor:pointer;
}

/*"↑"のアイコンに触れたときのカラーリング設定*/
#move-page-top:hover{
color:rgba(0,0,0,0.6);
}

プレビュー

f:id:DwarfRabbit:20200217135455g:plain — プレビュー

いかがでしょうか？問題なく反映されてますでしょうか？

上にスクロールされない場合の対処法

はてなブログでは、「HTTPS配信」を推奨しておりHTTPS配信を有効にしている場合は、HTMLにjavascriptのURLを記述する場合は「https://～」となっているかをきちんと確認してください。

特にワードプレスで作成されたブログを参考にしている場合などは、人によっては「https配信を設定していない」場合があるため、その場合のjavascriptのURLの記述は「https://～」となっている可能性があります。

この記述違いで、ほかの記述に問題がなくても動かなくなってしまうので注意してください！

レスポンシブ対応について

スマートフォンでも同じ機能を使用したい場合、ご存じかと思いますが「レスポンシブ対応」が必要となります。

設定方法は以下の画像の部分にチェックを入れるだけではてなブログは対応してくれます。

f:id:DwarfRabbit:20200217141822j:plain 一点注意として、今回アイコンの位置をCSSの"bottom"で40pxとしていますが、これ以上アイコンのサイズを小さくするとスマートフォンのはてなブログのアプリを使用している人は、下のバーにアイコンがかぶってしまうため、あまりおすすめしません。