画面1ページを軽く越える長い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>
他の例。右のスクロールバーを下に下ろしてみてください。
スポンサーリンク
スポンサーリンク
Category
BILLION WALLET Copyright©All rights reserved