今やWebサイトを作る際にはほぼ必須アイテムとなっている
ページの最上部に戻るための「ページトップへ」ボタン。
最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。
そんな「ページトップへ」ボタンの出現方法を
フェードイン／アウト、下方向からスライドイン／アウト、ボタン要素を拡大／縮小、
の3つパターンで実装する方法を紹介してみます。
【フェードイン／アウト】
jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法
「【フェードイン／アウト】jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法」サンプルを別枠で表示
ページ内を一定距離スクロールすると
画面右下に位置固定した形で「ページトップへ」ボタンが
フェードインして表示されます。
サンプルではページ内を100pxスクロールすると
ボタンが表示されるようにしてありますが
ここの距離についてはスクリプト側で設定します。
ボタンが出現する際はフェードインアニメーションがかかり
スクロール位置が100px未満になるとボタンはフェードアウトします。
「ページトップへ」ボタンはクリックすると
スクロールアニメーションでページの最上部に戻ります。
この「ページトップへ」ボタン実装の全体構成について
HTMLには特に特別な記述はありません。
（ボタン用のHTMLソースはスクリプト側から生成します）
CSSについては以下のようになります。
◆CSS
#fixedTop {
right: 10px;
bottom: 10px;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 20px;
text-align: center;
display: none;
background: #000;
position: fixed;
z-index: 9999;
border-radius: 5px;
-webkit-transform: translateZ(0);
}
#fixedTop:hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
opacity: 0.7;
}
CSSではボタンの形状を指定するほか、
［position:fixed］で画面右下に位置固定して、
［bottom］［right］プロパティで配置位置の調整をします。
ボタン自体は［display:none］で非表示の状態にしておきます。
そして実際のスクロールして出現させるスクリプトは以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
var showTop = 100;
$('body').append('<a href="javascript:void(0);" id="fixedTop">▲</a>');
var fixedTop = $('#fixedTop');
fixedTop.on('click',function(){
$('html,body').animate({scrollTop:'0'},500);
});
$(window).on('load scroll resize',function(){
if($(window).scrollTop() >= showTop){
fixedTop.fadeIn('normal');
} else if($(window).scrollTop() < showTop){
fixedTop.fadeOut('normal');
}
});
});
</script>
スクリプト開始部分にある「showTop」の設定値が
ページの先頭から何pxスクロールされたらボタンを表示させるか、
距離を設定する値になります。（px単位）
スクリプト4行目がボタンのソースを生成する部分になるので
ボタンにテキストや画像を使用するときにはこの部分に書き加えます。
ウィンドウが読み込まれた時、スクロールされた時、リサイズされた時
それぞれのイベントにスクロール位置を判別し、「showTop」の値と比較して
ボタンをフェードイン／アウトを切り替えています。
ボタンクリックでスクロールアニメーションさせる際の
スピードについては9行目にある「500」の数値になるので
ここの値を変えることで調整が可能です。
続いて、出現するアニメーションがフェードイン／アウトではなくて
画面下からスライドインしてボタンが表示されるパターンについて。
【スライドイン／アウト】
jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法
「【スライドイン／アウト】jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法」サンプルを別枠で表示
ページ内を一定距離スクロールすると
画面右下に位置固定した形で「ページトップへ」ボタンが
下方向からスライドインして表示されます。
フェードインのサンプル同様にページ内を100pxスクロールすると
ボタンが表示されるようにしてありますが
ここの距離についてはスクリプト側で設定します。
ボタンが出現する際はスライドインアニメーションがかかり
スクロール位置が100px未満になるとボタンは下方向にスライドアウトします。
このパターンのCSSについては以下のようになります。
◆CSS
#fixedTop {
right: 10px;
bottom: -60px;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 20px;
text-align: center;
background: #000;
position: fixed;
z-index: 9999;
border-radius: 5px;
-webkit-transform: translateZ(0);
}
#fixedTop:hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
opacity: 0.8;
}
CSSではボタンの形状を指定するほか、
［position:fixed］で画面右下に位置固定して、
下位置の指定を「bottom: -60px」として画面の外に隠しておきます。
ボタンの大きさを「50px」にしているので
「bottom」の値は「-60px」にして画面外に隠していますが
ボタンのサイズを変更した場合は
この部分の値も調整する必要があります。
そして実際のスクロールして出現させるスクリプトは以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
var showTop = 100;
$('body').append('<a href="javascript:void(0);" id="fixedTop">▲</a>');
var fixedTop = $('#fixedTop');
fixedTop.on('click',function(){
$('html,body').animate({scrollTop:'0'},500);
});
$(window).on('load scroll resize',function(){
if($(window).scrollTop() >= showTop){
fixedTop.stop().animate({bottom:'10px'},200);
} else if($(window).scrollTop() < showTop){
fixedTop.stop().animate({bottom:'-60px'},200);
}
});
});
</script>
全体の構成としてはフェードイン／アウトのパターンと同じになります。
スライドインのアニメーション設定部分については
スクリプト14、16行目でCSSの「bottom」の値をアニメーション操作しています。
14行目がスライドイン（表示）の値をアニメーション設定し
16行目でスライドアウト（非表示）の値をアニメーション設定します。
スライドイン／アウトする際のスピードは
各アニメーション設定の「200」の数値の部分になりますので
スピードを調整する場合はこの値を変更します。
その他のスクリプト動作はフェードイン／アウトのパターンと同様です。
最後に、拡大／縮小してボタンが表示されるパターンについて。
【拡大／縮小】
jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法
「【拡大／縮小】jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法」サンプルを別枠で表示
ページ内を一定距離スクロールすると
画面右下に位置固定した形で「ページトップへ」ボタンが
拡大アニメーションによって表示されます。
他のサンプル同様にページ内を100pxスクロールすると
ボタンが表示されるようにしてありますが
ここの距離についてはスクリプト側で設定します。
ボタンが出現する際は拡大アニメーションによって表示され
スクロール位置が100px未満になるとボタンは縮小アニメーションにて非表示状態になります。
このパターンのCSSについては以下のようになります。
◆CSS
#fixedTop {
right: 10px;
bottom: 10px;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 20px;
text-align: center;
background: #000;
position: fixed;
z-index: 9999;
border-radius: 5px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
transform: scale(0);
}
#fixedTop:hover {
opacity: 0.8;
}
#fixedTop.show {
transform: scale(1);
-webkit-transform: translateZ(0);
}
CSSではボタンの形状を指定するほか、
［position:fixed］で画面右下に位置固定して、
［bottom］［right］プロパティで配置位置の調整をします。
CSS3アニメーションの［transform:scale］の値を「0」にすることで
ボタン自体を非表示の状態にしておきます。
ボタン表示動作については
ボタンに対してCSSクラス「.show」がつくと
表示状態になる構成になっているので
「.show」に対して拡大アニメーションの設定をつけておきます。
拡大／縮小する際のスピードは
各「transition」設定の「0.3s」の数値の部分になりますので
スピードを調整する場合はこの値を変更します。
そして実際のスクロールして出現させるスクリプトは以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
var showTop = 100;
$('body').append('<a href="javascript:void(0);" id="fixedTop">▲</a>');
var fixedTop = $('#fixedTop');
fixedTop.on('click',function(){
$('html,body').animate({scrollTop:'0'},500);
});
$(window).on('load scroll resize',function(){
if($(window).scrollTop() >= showTop){
fixedTop.addClass('show');
} else if($(window).scrollTop() < showTop){
fixedTop.removeClass('show');
}
});
});
</script>
全体の構成としては他のパターンと同じになります。
拡大アニメーション設定部分については
14行目でボタン要素にCSSクラス「.show」を付けて拡大アニメーションを動作させて表示状態にし
16行目でボタン要素からCSSクラス「.show」を外すことで縮小アニメーションにて非表示状態にしています。
以上、3つのパターンにて
スクロールすると表示するページトップへ戻るボタンを実装する紹介でした。
「ページトップへ」のボタンだけでも
出現方法にすこし演出を加えることで
違った印象を与えることが出来るかと思っております。
「ページトップへ」のボタンを実装する際にぜひ。。。