クリックするとページの先頭へスルスルと移動するボタン

最近よく見かける表示で画面の底辺近くにボタンを固定配置し、クリックでページの先頭が表示されます。
1.jQueryライブラリーを読み込む(jQueryを初めて利用する場合)。
記述は、「header.php」に、「< ?php wp_head(); ?> 」の後で、かつ「/head」の間。
注 記述位置は、「wp_head()」の直後
1 |
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> |
2.ボタンの設置
以下のhtmlを「header.php」又は「footer.php」に記述します。入れる位置は、「header.php」には:「/header」の前、「footer.php」には、「footer」の先頭が良いかと思います。これは一例で、基本的に位置は、htmlタグの常識的場所ならOKです。
1 |
<div class="pagetop"><a href="#top">▲</a></div> |
リンク先の名前(アンカー)は、「#top」とすることで、ページ先頭位置に「a name=」は不要です。css3からサポートされました。
3.ボタンのCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.pagetop { display: none; position: fixed; bottom: 60px; right: 20px; z-index:100; } .pagetop a { display: block; background-color: rgba(0,255,0,0.3); text-align: center; color: #60f; font-size: 20px; text-decoration: none; padding: 20px 30px; border:solid 1px #000; border-radius: 10px; } .pagetop a:hover { display: block; background-color:rgba(153,153,255,0.4); text-align: center; color: #f00; font-size: 20px; text-decoration: none; padding:20px 30px; border:solid 1px #000; border-radius: 10px; } |
- 行番
- 説 明
- 2
- ボタン表示、初期値は非表示
- 3-5
- 位置を固定化し、下からと右からの位置を指定
- 6
- 最前面に表示する。
- 8
- .pagetopにリンク設定
- 9
- .pagetop全体が1つのボックスと認識される。これがないと、▲しかリンクされない。
- 10
- 背景色をrgbaの色コードの最後を「0.3」で半透明化。数値が小さいほど透明度が上がる。
- 11-17
- 好みに合わせて設定下さい。
- 20-
- ボタンにマウスを重ねたときの設定です、上記9-17と同じように記述。
スマホ・タブレット用にボタンを小さくしたい場合、以下のCSS
1 2 3 4 5 6 7 8 |
@media only screen and (max-width: 480px) { .pagetop a {padding:10px 15px;} .pagetop a:hover {padding:10px 15px;} } @media only screen and (min-width:481px) and (max-width:780px) { .pagetop a {padding:15px 20px;} .pagetop a:hover {padding:15px 20px;} } |
4.ページ先頭へのスクロール・jQuery
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { var button = $('.pagetop'); $(window).scroll(function () { if ($(this).scrollTop() > 100) { button.fadeIn(); } else {button.fadeOut();} }); button.click(function () { $('body, html').animate({ scrollTop: 0 }, 1000); return false; }); }); |
- 行番
- 説 明
- 1
- htmlを全て読み込んだら実行
- 2
- クラス名「.pagetop」(ボタン)の要素をbuttonという名で定義した領域に入れる
- 3-7
- 見ているページの先頭が上から100px以上になった時、ボタンをフェードイン(ゆっくり表示)し、以外はフェードアウト(ゆっくり消える) ※
- 8-10
- ボタンがクリックされたら、ページの先頭までスクロールしながら表示。数値1000はミリ秒で→1秒、数値が少ないと早く、多いとゆっくり。
※ 現在見ている画面の一番上が、そのページの最上部から何ピクセル離れているか。