Webサイトを検索しているときなどに、TOPへ戻りたくなるときありますよね。
そんな時にスクロールしなくてもボタン一つで戻れるサイトだとなんて読者に優しいサイトなんだ！とまでは思わないにしても、あると助かります。
この記事では、「TOPへ戻るボタン」を私のサイトに導入した際の記録になっていますので、TOPへ戻るボタンを導入したい方は、ぜひ参考にしていただければと思います。
超簡単：「TOPへ戻るボタン（スムーススクロール）」の作成方法【はてなブログ】
「TOPへ戻る」ボタン：スムーススクロール
Webサイトなどを閲覧している際によく見る「Topに戻る」などのボタン。
これは「スムーススクロール」という、ページ内をスクロールする挙動の機能を使用しています。
Webサイトを閲覧しにきてくれた訪問者のためにも設置しておいたほうが良い機能で、はてなブログでは簡単に設置が可能なので、早速設置してしまいましょう。
注意
お使いのテーマによっては、こちらで紹介したコードで作動しない場合もあります。
「TOPへ戻る」ボタン：作成
「TOPへ戻る」ボタンの作成は簡単で、３つのコードをコピペすれば完成します。
アイコンなど変更したい方は、最後にアイコンをカスタマイズする方法も記載しておきます。
コード１：<head>要素
はてなブログの詳細設定にある「headに要素を追加」に下記コードを設定します。
<!-- TOPに戻るボタンの設定 -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
「headに要素を追加」に設定
| ＜ ダッシュボード → 設定 → 詳細設定 → 検索エンジン最適化 → headに要素を追加 ＞ |
「headに要素を追加」にコピーしたコードを設定して、一番下にある「変更する」をクリックして1つ目のコードは設定完了です。
コード２：フッタ
デザインカスタマイズにある「フッタ」に下記HTMLコードを設定します。
コードを表示する
<!-- TOPに戻るボタンの設定 -->
<div id="page-top">
<a id="move-page-top"><i class="fas fa-chevron-circle-up fa-3x"></i></a>
</div>
<!-- TOPに戻るレンジの設定 -->
<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");
});
</script>
「フッタ」に設定
| ＜ ダッシュボード → デザイン → カスタマイズ → フッタ ＞ |
MEMO
ボタンのアイコンは変更が可能です。
カスタマイズ方法は後述していますので、そちらを参考にしてください。
コード３：CSS
デザインカスタマイズにある「{} デザインCSS」に下記CSSコードを設定します。
コードを表示する
#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:#696969;
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:#a9a9a9;
}
「{} デザインCSS」に設定
| ＜ ダッシュボード → デザイン → カスタマイズ → {} デザインCSS ＞ |
「フッタ」にHTML、「{} デザインCSS」にCSSコードをそれぞれ設定したら「変更を保存する」をクリックして「TOPへ戻る」ボタンの作成が完了となります。
ブログを確認してみてくださいね。
「TOPへ戻る」ボタン：アイコンカスタマイズ
TOPへ戻るのアイコンは、デザインや色の変更が可能ですので、ご自身のサイトに合ったアイコンにカスタマイズしてみましょう。
カスタマイズ：デザイン
アイコンのデザインは、フッタに貼り付けたHTML（添付画像の青線部分）を書き換えることによって変更が可能です。
デザインは「Font Awesome」で好みのアイコンを探してみてください。
３種類だけアイコンのHTMLを貼っておきますので、良ければお使いください。
◆angle-double-up
コードを表示する
<!-- TOPに戻るボタンの設定 -->
<div id="page-top">
<a id="move-page-top"><i class="fas fa-angle-double-up fa-3x"></i></a>
</div>
<!-- TOPに戻るレンジの設定 -->
<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");
});
</script>
◆arrow-alt-circle-up
コードを表示する
<!-- TOPに戻るボタンの設定 -->
<div id="page-top">
<a id="move-page-top"><i class="fas fa-arrow-alt-circle-up fa-3x"></i></a>
</div>
<!-- TOPに戻るレンジの設定 -->
<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");
});
</script>
◆arrow-alt-circle-up
コードを表示する
<!-- TOPに戻るボタンの設定 -->
<div id="page-top">
<a id="move-page-top"><i class="far fa-arrow-alt-circle-up fa-3x"></i></a>
</div>
<!-- TOPに戻るレンジの設定 -->
<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");
});
</script>
カスタマイズ：色の変更
アイコンの色の変更は、「{} デザインCSS」に設定したCSSの「color」の「＃」から始まる6桁の数字を書き換えることで変更が可能です。
カラーコードは下記サイトで確認できます。
参考：WEB色見本 原色大辞典 - HTMLカラーコード
参考にさせていただいたサイト
hatebumaru.hatenablog.com
こちらのサイトを参考にさせていただきました。
簡単に「TOPへ戻るボタン」が作成できました。
ありがとうございました。
最後に…
また一歩、素敵なサイトに成長しましたね。
HTMLとかCSSとかを使いこなせるようになったら、もっともっとオシャレにカスタマイズできるのだろうけど、なかなか素人には難しいですね(笑)
最近は、コピペだけではなく、多少カスタマイズも学んでいて、少しずつ成長しつつあるのかな…なんて思っています。
これからも、もっともっとオリジナリティ溢れるサイトにできるよう日々精進していきたいと思います。
この記事が、誰かのお役に立てたら嬉しいです♡
