どうも、たつとら(@tatsutora6) です。
皆さんもブログやサイトページを読んでいて、縦に長いページだとページトップに戻ろうと思っても上にスクロールしていくのがわずらわしくないですか？（まあ、人にもよるかもしれませんが）
今回ボクも自分のページを読んだりしていて、トップに戻るまでに一々スクロールするのが面倒で、よく人のブログのページとかでも見かける「トップへ戻る」ボタン
よく見るこんなのや、
こんなボタン
を設置しました。
ブログには「はてなブログ」を使用していますが、ブログのテーマによっては最初から実装されているテーマもあるそうですが、ボクが設定している「薄グレーテンプレ」には実装されていないので設置することにしました。
また、設置に関しては別の理由もあり、ボクはページのトップにグローバルナビを設置していて、
グローバルナビについての記事はこちら
記事を最後まで読んでもらい、「トップへ戻る」ボタンを押してもらい、ナビから違うカテゴリーに飛んでもらって別の記事を読んでもらって、ブログ全体の回遊性を上げたいとか、最初の内容を読み返してみたいこともあるかもしれないと思い設置しました。
フローティング（スクロールすると付いてくる）ナビを設置している人は余り意味ないかもしれませんが…
今回参考にしたのは
今回設置に関して参考にしたページはこちらのページで
こちらに記載のコードを挿入するだけで誰でも簡単に設置できます。
こちらのページには、いろいろなデザインのボタンのコードが記載されていますが、今回ボクが実装したデザインのコードを貼っておきます。
設置方法
その前に、ボタンデザインで使われているアイコンフォントを使用する為のコードを
【ダッシュボード】＞【設定】＞【詳細設定】＞【検索エンジン最適化】＞【headに要素を追加】の中に下記のコードを入れます。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
そして、下記のコードを【ダッシュボード】＞【デザイン】＞【カスタマイズ】＞【記事】＞【記事下】に入れます。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
<div id="page_top"><a href="#"></a></div>
次に下記のコードを【ダッシュボード】＞【デザイン】＞【カスタマイズ】＞【デザインCSS】に入れます。
#page_top{
width: 90px;
height: 90px;
position: fixed;
right: 0;
bottom: 0;
opacity: 0.6;
}
#page_top a{
position: relative;
display: block;
width: 90px;
height: 90px;
text-decoration: none;
}
#page_top a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f102';
font-size: 25px;
color: #3f98ef;
position: absolute;
width: 25px;
height: 25px;
top: -40px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
#page_top a::after{
content: 'PAGE TOP';
font-size: 13px;
color: #fff;
position: absolute;
top: 45px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
color: #3f98ef;
}
このコードを貼るだけで、右下にボタンが表示されます。
このままでもいいんですが、スクロールしていくと自然と右下に出てくるようにしたいので、こちらも上記の参考にした記事にも書かれているコードも貼りました。
スポンサーリンク
スクロールしたら表示させる方法
まず、動きを出す為の関数jQueryを読み込む為に
【ダッシュボード】＞【設定】＞【詳細設定】＞【検索エンジン最適化】＞【headに要素を追加】に下記のコードを入れます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
そして、下記のコードをこれも【ダッシュボード】＞【デザイン】＞【カスタマイズ】＞【記事】＞【記事下】に入れます。
<script type="text/javascript">
jQuery(function() {
var pagetop = $('#page_top');
pagetop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 500) { //500pxスクロールしたら表示
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500); //0.5秒かけてトップへ移動
return false;
});
});
</script>
これで、現在ボクの記事に表示されているボタンが設置されるようになります。コメントが書いてある部分は数字を変更することで調整もできます。
その他にも「スクロールしていくと下からボタンがでてくる動き」や、「スクロールしていくと横からボタンがでてくる動き」のコードも参考にした記事には載っているので、自分の好みに合わせて設置するのもいいでしょう。
最後に
以上、「トップへ戻るボタン」の簡単な設置方法でしたが、これで少しでも回遊性が上がり１ページで離脱する事も減ってPV数が上がればいいですが。
▼アフィリエイトを始めるならオススメはこちら
