スクロールすると「ページトップへ」ボタン出現
一定の量をスクロールすると、右下に「PageTop」ボタンが出現。
クリックすると、ぬるっと一番上まで戻ってくれるボタンを設置します。
Googleが用意したjQueryを読み込む
<head></head>の中に以下を追加。
本体をDLして自分でアップロード・読み込んでもいいけど、グーグルさんが用意したjQueryを読み込んだほうが速いです。
(ネットサーフィンをしてると大体コレを踏んでいて、パソコン内にキャッシュが残っていることが多いので)
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
jQuery
<head></head>の中に以下を追加。
6行目の「600」は、600pxスクロールしたら「ページトップ」が出現。
13行目の「500」は、上部まで戻る「スピード」です。
少なくすると早く、多くすると遅くなります。
HTML
<script type="text/javascript"> $(function() { var pageTop = $('.page-top'); pageTop.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 600) { pageTop.fadeIn(); } else { pageTop.fadeOut(); } }); pageTop.click(function () { $('body, html').animate({scrollTop:0}, 500, 'swing'); return false; }); }); </script>
HTML
上部に戻るボタンです。
CSSで位置を固定するので、どこに書いてもよいです。
HTML
<a href="#" class="page-top">PAGE TOP ▲</a>
CSS
CSSで装飾します。
「position: fixed;」絶対位置(スクロールしても位置固定)
「bottom: 60px;」下から60pxに配置
「right: 40px;」右から40pxに配置
あとは適当に。
角を丸くしたり半透明にしたりすると、カッコイイです。
(下記は当サイトのpage-topと同じCSSです)
CSS
.page-top { position: fixed; bottom: 60px; right: 40px; padding: 10px; background: #7e7a7a; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; font-size: 12px; -ms-filter: "alpha(opacity=80)"; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; }
以上でページトップに戻るボタン設置は終了です。
jQueryを外部ファイルにしたい場合
<head>の中にごちゃごちゃ書きたくない!
という方は、jQueryを「外部ファイル」にして最後に読み込みましょう。
jsファイル
$(function() { var pageTop = $('.page-top'); pageTop.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 600) { pageTop.fadeIn(); } else { pageTop.fadeOut(); } }); pageTop.click(function () { $('body, html').animate({scrollTop:0}, 500, 'swing'); return false; }); });
<head>の中に記述したjQueryを「メモ帳」に貼り付ける。
(このとき、最初と最後の<script type="text/javascript"></script>は不要。)
貼り付けたら、拡張子を「.js」にして保存する。
ファイルの種類の中のプルダウンに「.js」はないので、ファイル名に直接入力しちゃえばOK。
今回は「page-top.js」で保存したとします。
(文字化けしたり動かない場合は、保存するときの「文字コード」に問題あるかも。よく分からないけど私は「UFT-8」で保存しています)
「page-top.js」を呼び出す記述をします。
HTML
<script type="text/javascript" src="page-top.js"></script>
読み込むのは最後でいいので、記述は</body>の直前でOK。