どうも!フジグチです!
前回の記事で「ページ内リンク」について書きました。
ページ内リンクを使いこなせば、閲覧する側のちょっとした手間を省くことが出来るので、ユーザビリティが良くなります。
このページ内リンクを使えば色々なサイトでよく見かける「トップへ戻る」ボタンを作ることが出来ます。
この記事では、HTMLとCSSのみで軽量で手軽に設置出来る「トップへ戻る」ボタンの作り方を紹介します。
サイト下に固定するボタン
まずはじめに当サイトで使っている「トップへ戻る」ボタンです。(※現在は使用していません)
当サイトで長文の記事はあまりないので、不要かな?とは思いつつも「サイト下までスクロールして見て下さり、トップに戻りたい方は良ければお使いください」というスタンスで「サイト下に固定」で設置しています。
- ボタンを常に表示はしたくない
- でもトップへ戻るボタンは設置したい
という方におすすめです。
サイト下トップへ戻るボタンのHTML
こちらのコードをフッタに入れてください。
<a href="#" id="page-top"><i class="blogicon-chevron-up"></i>トップへ戻る</a>
「トップへ戻る」の文字は「TOPへ」や「ページトップ」など、お好きな言葉に変えても問題ありません。
アイコンが不要の場合は<i class="blogicon-chevron-up"></i>
の部分を削除してください。
サイト下トップへ戻るボタンの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; /*文字色*/ } /***トップへ戻るボタンここまで***/
当サイトとは違い、色は白と黒でシンプルにしています。
フッターとの隙間が気になる場合は、#footer {margin-top: 0!important}
とすることで隙間をなくすことが出来ます。
追従するボタン
続いて追従する「トップへ戻る」ボタンです。
デザインはこんな感じ▽
- ボタンを常に表示していたい
- ヘッダー下におすすめ記事を設置してあり、トップへ戻って回遊してもらいたい
という方におすすめです。
追従するボタンのHTML
こちらのコードをフッタに入れてください。
<a href="#" id="page-top"><i class="blogicon-chevron-up"></i></a>
blogicon-chevron-upのクラス名を変更するとアイコンが変えられます。
こちらに、はてなブログで使えるアイコンフォント全125種をまとめてあるのでお使いください。
追従するボタンのCSS
こちらのコードをデザイン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); } /***トップへ戻るボタンここまで***/
小洒落た感じの追従するボタン
ちょっと小洒落た感じ(個人の見解です)のも作ってみました。
デザインはこんな感じ▽
小洒落た追従するボタンのHTML
こちらのコードをフッタに入れてください。
<a href="#" id="page-top">TOP</a>
「TOP」の文字は変えることが出来ますがデザインが崩れるかもしれません。
その場合はご自身で調整してください。
小洒落た追従するボタンのCSS
/***追従するトップへ戻るボタン***/ #page-top { position: fixed; right: 5px; bottom: 20px; height: 50px; text-decoration: none; font-weight: bold; transform: rotate(90deg); font-size: 90%; line-height: 1.5rem; color: #737373; padding: 0 0 0 35px; border-top: solid 1px; } #page-top::before { content: ""; display: block; position: absolute; top: -1px; left: 0px; width: 15px; border-top: solid 1px; transform: rotate(35deg); transform-origin: left top; } /***トップへ戻るボタンここまで***/
お使いのデザインでフッタと色が被ると、見づらくなってしまうかもしれません。
その場合はcolor: #737373;
の#数字の部分を変えて色を調整してください。
例color: #ffbf70;
border
に色の指定をしていないので、color
を変えれば連動して線の色も変わります。
こちらのサイトでお好きなカラーコードを探してみてください。
さらにエフェクトを追加する
当サイトではスムーズスクロールを使っているので、対応しているブラウザでは下のgif画像のような動きになります。
実質1行CSSを追加するだけですので、簡単に導入することが出来ます。
こちらの記事を参考にしてください。