こんにちは祐（@yuu30810）です。
今回は『トップへ戻るボタンを表示する方法』について、解説していきます。
下記が完成イメージです⇩
とくに難しい作業や、専門知識などは必要なく、コピペのみで完了します。
ぜひ参考にしてみてください。
・トップへ戻るボタンを表示するメリット
・トップへ戻るボタンの表示方法
トップへ戻るボタンを表示するメリット
ブログを最後まで読んだあと、トップへ戻るのに、またスクロールしなければならないって、地味にメンドクサイじゃないですか。
記事や、コンテンツ量が多ければ多いほど大変ですよね。
そんな苦労をボタン一つで解決できるのであれば、設置しておいて損はないと思います。
ぜひ導入してみてください。
トップへ戻るボタンを表示するまでの手順
①ダッシュボードの【デザイン】を選択
②【スパナマーク】→【フッタ】の順で選択し、これから紹介するコードを枠内に貼り付ける
トップへ戻るボタンを表示するHTMLコード
<a href="#container" id="page-top"><i class="blogicon-chevron-up"></i>トップへ戻る</a>
上記のコードを、フッタに貼り付けます。
まだ、この時点では完成していません。
とても簡単な作業です。
④ダッシュボードの【デザイン】を選択
⑤【スパナマーク】→【デザインCSS】の順で選択し、これから紹介するコードを枠内に貼り付ける
トップへ戻るボタンを表示するCSSコード
/***トップへ戻るボタン***/
#page-top {
display: block;
font-weight: bold;
padding: .7em;
text-align: center;
background: #fff; /*背景色*/
color: #666; /*文字色*/
transition: .3s;
}
/***マウスオーバー時***/
#page-top:hover {
background: #666; /*背景色*/
color: #fff; /*文字色*/
}
/***トップへ戻るボタンここまで***/
上記のコードを、デザインCSSに貼り付けます。
以上で、完成です。
追従するトップへ戻るボタンのHTMLコード
デザインは下記の通り⇩
<a href="#container" id="page-top"><i class="blogicon-chevron-up"></i></a>
上記のコードを、フッタに貼り付けてください。
追従するトップへ戻るボタンのCSSコード
/***追従するトップへ戻るボタン***/
#page-top {
position: fixed;
right: 10px;
bottom: 10px;
font-size: 1.2rem;
line-height: 1.2rem;
background: #fff;
color: #737373;
padding: 10px;
border: solid 1px;
border-radius: 50%;
box-shadow: 0 2px 10px -6px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,.2);
}
/***トップへ戻るボタンここまで***/
上記のコードを、デザインCSSに貼り付けます。
以上で完成です。
少しでも参考になれば嬉しいです。