フジブロっ！

はてなブログのカスタマイズに役立つ記事やツール、デザインテーマの制作を行なっている、カスタマイズ専門ブログ

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

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

本ページはプロモーションが含まれています

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

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

サイト下トップへ戻るボタンのHTML a href="#" id="page-top">i class="blogicon-chevron-up">トップへ戻るサイト下トップへ戻るボタンの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 とすることで隙間をなくすことが出来ます。

追従するボタン

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

追従するボタンのHTML a href="#" id="page-top">i class="blogicon-chevron-up"> 追従するボタンの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 小洒落た追従するボタンの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; の#数字の部分を変えて色を調整してください。

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

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

CSSのみ！簡単にスムーズスクロールを導入するサイト内の指定した場所にリンクしてユーザビリティを上げる！サイドバーを固定して追従させるカスタマイズ