[CSS]先頭に戻るボタンを常に右下に表示する方法

データを表などを使って表示すると縦に長いページになってしまったりすることがあります。データを下にスクロールしながら閲覧している時に、先頭に戻りたい場合はパソコンのブラウザであれば、スクロールバーを移動させることで高速に移動することもできますが、スマホ、タブレットの場合は指でフリックを何度もしなければならず、相当面倒なことになってしまいます。

このような問題を解決する1つの方法として、右下に「先頭に戻る」ボタンを常に表示しておくという方法が考えられます。今回は「先頭に戻る」ボタンを常に表示しておく方法をご紹介します。

まずはHTMLです。「先頭に戻る」ボタンを押した時の戻り先をdivタグで作っておきます。bodyタグのすぐ下で良いでしょう。さらに「先頭に戻る」ボタンをbodyタグを閉じる前に入れておきます。スタイルシートでデザインするので、class名を入れてあります。

<! DOCTYPE html>
<html>
  <head>
  ～～ヘッダの内容～～
  </head>
  <body>
    <div id="header"></div>
    ～～コンテンツ～～
    <div class="back"><a href="#header">先頭に戻る</a></div>
  </body>
</html>

次にスタイルシートです。今回のボタンは外枠に丸みを帯びた半透明のボタンにしてみました。

.back {
 position: fixed;
 bottom: 10px;
 right: 10px;
 
 border:1px solid #888888;
 padding:2pt;
 background-color: #ffffff;
 filter:alpha(opacity=85);
 -moz-opacity:0.85;
 -khtml-opacity: 0.85;
 opacity:0.85;
    
 text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #aaa;  
 -webkit-box-shadow: 1px 1px 2px #E7E7E7;
 -moz-box-shadow: 1px 1px 2px #E7E7E7;  
 -webkit-border-radius: 3px;  
 -moz-border-radius: 3px; 
}

動作させると、このようにブラウザの右下にボタンが常に表示されるようになります。