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

2017-6-9

最近よく見かける表示で画面の底辺近くにボタンを固定配置し、クリックでページの先頭が表示されます。

１．jQueryライブラリーを読み込む（jQueryを初めて利用する場合）。

記述は、｢header.php｣に、｢< ?php wp_head(); ?> ｣の後で、かつ｢/head｣の間。

注記述位置は、「wp_head()」の直後

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>

1	<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>

２．ボタンの設置

　以下のhtmlを｢header.php｣又は｢footer.php｣に記述します。入れる位置は、｢header.php｣には：｢/header｣の前、｢footer.php｣には、｢footer｣の先頭が良いかと思います。これは一例で、基本的に位置は、htmlタグの常識的場所ならＯＫです。

<div class="pagetop"><a href="#top">▲</a></div>

1	<div class="pagetop"><a href="#top">▲</a></div>

リンク先の名前（アンカー）は、｢#top｣とすることで、ページ先頭位置に｢a name=｣は不要です。css3からサポートされました。

３．ボタンのＣＳＳ

.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;
}

.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全体が１つのボックスと認識される。これがないと、▲しかリンクされない。

10
背景色をrgbaの色コードの最後を｢0.3｣で半透明化。数値が小さいほど透明度が上がる。

11-17
好みに合わせて設定下さい。

20-
ボタンにマウスを重ねたときの設定です、上記9-17と同じように記述。

スマホ・タブレット用にボタンを小さくしたい場合、以下のＣＳＳ

@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;}
}

@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;}

}

４．ページ先頭へのスクロール・jQuery

$(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; });
});

$(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はミリ秒で→１秒、数値が少ないと早く、多いとゆっくり。

※　現在見ている画面の一番上が、そのページの最上部から何ピクセル離れているか。