WEBページでスクロールした時に「ページトップへ」の表示を画面の下の方に出現させるのを見かけることが多くなっています。
jQueryで実装すれば簡単に設置させることが可能です。
長いページの場合など常に「ページトップへ」のリンクが画面にあれば、ユーザビリティ的にも良いと思います。
下記のサイトを参考にさせてもらいました。ありがとうございます。
http://www.webopixel.net/javascript/538.html
今回はjQueryで画面をスクロールした時に画面下部に「ページトップへ」のリンクをフェードさせて表示する方法をメモします。
■ スクロールした時に「ページトップへ」を表示
【js】
jQueryを読み込み、スクロールした時の処理を記述します。
最初に「ページトップへ」の要素を非表示にして、指定したスクロール位置を超えた場合に「ページトップへ」の要素をフェードインして表示するようにしています。
また指定したスクロール位置よりもスクロール位置の値が小さい場合はフェードアウトします。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// 「ページトップへ」の要素を隠す
$('#pagetop').hide();
// スクロールした場合
$(window).scroll(function(){
// スクロール位置が100を超えた場合
if ($(this).scrollTop() > 100) {
// 「ページトップへ」をフェードイン
$('#pagetop').fadeIn();
}
// スクロール位置が100以下の場合
else {
// 「ページトップへ」をフェードアウト
$('#pagetop').fadeOut();
}
});
// 「ページトップへ」をクリックした場合
$('#pagetop').click(function(){
// ページトップにスクロール
$('html,body').animate({
scrollTop: 0
}, 300);
return false;
});
});
</script>
【css】
スクロールしても位置を固定させる為に「position: fixed;」を指定します。
また、配置する位置を「bottom」「right」で指定します。
<style type="text/css">
#pagetop {
position: fixed;
bottom: 10px;
right: 10px;
}
</style>
【html】
ページのbody内に「ページトップへ」要素を記述します。
<p id="pagetop"><a href="#">ページトップへ</a></p>
画像を表示させる場合は下記のように指定します。
<p id="pagetop"><a href="#"><img src="pagetop.jpg"></a></p>
上記を設定してスクロールすると指定した位置までスクロールした時に「ページトップへ」要素が表示されるようになります。
スタイルなどを調整すればオシャレな表示になると思います。
