フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

\おすすめのカスタマイズ/

HTMLとCSSのみで作るトップへ戻るボタン【デザイン3種類】

どうも!フジグチです!

前回の記事で「ページ内リンク」について書きました。

ページ内リンクを使いこなせば、閲覧する側のちょっとした手間を省くことが出来るので、ユーザビリティが良くなります。

このページ内リンクを使えば色々なサイトでよく見かける「トップへ戻る」ボタンを作ることが出来ます。

この記事では、HTMLとCSSのみで軽量で手軽に設置出来る「トップへ戻る」ボタンの作り方を紹介します。

f:id:utoutosara:20201104210202p:plain

サイト下に固定するボタン

まずはじめに当サイトで使っている「トップへ戻る」ボタンです。

当サイトで長文の記事はあまりないので、不要かな?とは思いつつも「サイト下までスクロールして見て下さり、トップに戻りたい方は良ければお使いください」というスタンスで「サイト下に固定」で設置しています。

  • ボタンを常に表示はしたくない
  • でもトップへ戻るボタンは設置したい

という方におすすめです。

サイト下トップへ戻るボタンのHTML

こちらのコードをフッタに入れてください。

<a href="#container" 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}とすることで隙間をなくすことが出来ます。

追従するボタン

続いて追従する「トップへ戻る」ボタンです。

デザインはこんな感じ▽

f:id:utoutosara:20201107224543j:plain

  • ボタンを常に表示していたい
  • ヘッダー下におすすめ記事を設置してあり、トップへ戻って回遊してもらいたい

という方におすすめです。

追従するボタンのHTML

こちらのコードをフッタに入れてください。

<a href="#container" id="page-top"><i class="blogicon-chevron-up"></i></a>

追従するボタンの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);
}
/***トップへ戻るボタンここまで***/

小洒落た感じの追従するボタン

ちょっと小洒落た感じ(個人の見解です)のも作ってみました。

デザインはこんな感じ▽

f:id:utoutosara:20201107224618j:plain

小洒落た追従するボタンのHTML

こちらのコードをフッタに入れてください。

<a href="#container" 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;

f:id:utoutosara:20201107225318j:plain
f:id:utoutosara:20201107224642j:plain

borderに色の指定をしていないので、colorを変えれば連動して線の色も変わります。

こちらのサイトでお好きなカラーコードを探してみてください。

さらにエフェクトを追加する

当サイトではスムーズスクロールを使っているので、対応しているブラウザでは下のgif画像のような動きになります。

f:id:utoutosara:20201107230334g:plain

実質1行CSSを追加するだけですので、簡単に導入することが出来ます。

こちらの記事を参考にしてください。

 関連記事
CSSのみ!簡単にスムーズスクロールを導入する
CSSのみ!簡単にスムーズスクロールを導入する
 関連記事
サイト内の指定した場所にリンクしてユーザビリティを上げる!
サイト内の指定した場所にリンクしてユーザビリティを上げる!

 

トップへ戻る