jQueryを使って、スルスルッと上昇する「ページトップへ」ボタンを設置する方法を紹介したいと思います。
簡単なデモページも用意したので、ぜひクリックして動きを確認してみてください。
デモページでは、最下部と一定量スクロールすると画面右下に、ページトップへボタンを設置しています。
スルスルッと上昇する「ページトップへ」ボタンを設置する方法
最もシンプルな方法は、デモページの最下部に設置している「ページトップへ」のように、テキストリンクを設置する方法です。
まずは、jQueryとスクリプトをロードします。これは</body>の直前に記述すればOKです。
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
var topBtn = $('#pagetop');
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
</script>
8行目にある「1000」の数字を変えることで、上昇するスピードを変更することができます。値が少ないほど早くなります。
続いて、「ページトップへ」用のテキストリンクを設置します。
<a href="#top" id="pagetop">ページトップへ</a>
a要素のIDは、上記スクリプト内の「var topBtn = $(‘#pagetop’);」と合わせます。
今回はテキストリンクにしていますが、画像リンクにすることも可能です。とにかくリンクのIDさえ合わせれば動きます。
スクロールするとボタンが現れるようにする
よく見かけるのは、このパターンですね。一定量スクロールすると、ボタンが現れるようにします。
まずは、例によってjQueryとスクリプトをロードします。
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var pagetop = $('.pagetop');
$(window).scroll(function () {
if ($(this).scrollTop() > 600) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 1000);
return false;
});
});
</script>
6行目でボタンが表示されるまでの距離を指定しています。スクロールの速度については、先ほどと同様に13行目の値で調整します。
続いて、ボタン用のHTMLを記述します。今回はクラスにしています。上記スクリプトの4行目と合わせてください。
<p class="pagetop"><a href="#top" class="pagetop">↑</a></p>
CSSは以下のような感じで、右下に固定で表示されるようにしています。
.pagetop {
display: none;
position: fixed;
right: 60px;
bottom: 30px;
}
.pagetop a {
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #333;
text-align: center;
color: #fff;
font-size: 26px;
text-decoration: none;
}
こちらの方が、見た目的にも使い勝手もいいかもしれませんね。
あとがき
今回は、2種類の「ページトップへ」ボタンの設置方法を紹介させていただきました。どちらの方法で実装するかは、好みやサイトの雰囲気にもよると思います。
「ページトップへ」ボタンは、単純にリンク先を#topなど、ページ上部のIDに飛ばすようにすれば実装できますが、ちょっとした動きがあった方がわかりやすいですね。
「ページトップへ」に一手間加えたい時は、ぜひ参考にしてください。