[CSS：jQuery] スムーズに「TOPへ戻るボタン」の作り方

画面１ページを軽く越える長いHTML文書を下にスクロールしながら見ている途中、最初の一番上のTOPへ戻りたい時に、マウスの真ん中ホイールを動かしてページをスクロールするのは結構面倒なことです。

そんなときに使われるのがページの「Topへ戻るボタン」機能です。これは、普通マウスでHTMLページを下にスクロールすると画面の右下に上向きの矢印が出てきて、それを押すと一気にページのトップに移動します。

ウェブページのTOPに戻りたいときに非常に役立ちます。

その機能を作るにはHTMLとCSS、スクリプトのjQueryがそれぞれ必要です。

ここで使っているIDクラス名(#gobacktotop)はお好きな名称に書き換えてもかまいません。

CSS

  <style>  
 #gobacktotop {
　　cursor : pointer;
　　display : none;
　　margin : 0% 0% 0% 90%;  /*右下の画像の位置*/
　　position : fixed;
　　bottom : 20px;
　　font-size : 90%;
　　padding : 10px;
　　width : 30px;
　　height : 30px;
　　text-align : center;
　　background-color : #000;
　　border-radius : 8px;
　　-webkit-border-radius : 8px;
　　-moz-border-radius : 8px;
　　filter : alpha(opacity=30);
　　-khtml-opacity : 0.6;
　　-moz-opacity : 0.6;
　　opacity : 0.6;
　　color : #FFF;
　　font-size : 11px;
　　z-index : 1000;
　}

 #gobacktotop:hover{
　　filter : alpha(opacity=90);
　　-khtml-opacity : 0.9;
　　-moz-opacity : 0.9;
　　opacity : 0.9;
　}
  </style>

Font Awesome CSS

今回の例では、「 Topへ戻るボタン」に表示させている「矢印」は画像ではなくテキストフォントである「Font Awesome」を使っているので、CSSとのリンクが必要になります。

別途に他の画像を使う場合はこのCSSは不要です。

 <style>  
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 </style>

HTML

「矢印」はFont Awesomeを使用してます。

 <body>  
    <div id="gobacktotop">
       <i class="fa fa-arrow-circle-o-up fa-3x"></i>
    </div>
 </body>

javascript・jQuery(ジェイクエリー)

最後にウェブブラウザ用のJavaScriptライブラリであるjQueryを使えば、主要なブラウザでこのような機能が簡単に実現できます。


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascriptt">
  
 <script type="text/javascript">
$(function() {
 $(window).scroll(function() {
  if($(this).scrollTop() != 0) {
   $('#gobacktotop').fadeIn(); 
  } else {
   $('#gobacktotop').fadeOut();
  }
 });
 
 $('#gobacktotop').click(function() {
  $('body,html').animate({scrollTop:0},800);
 }); 
});
 </script>
 </body>

他の例。右のスクロールバーを下に下ろしてみてください。