数あるサイトの中には、ページを下にスクロールしていくとサイトの上部に戻るボタンが現れ、それを押すとぺージトップに戻るボタンを見ることがあると思います。
そこで今回はページトップに戻るボタンの設置方法を解説したいと思います！
目次
1. ページトップに戻るボタンの設置方法
まず、以下のデモページのようなページトップに戻るボタンを設置する方法を解説したいと思います。
デモページ
上のデモページでは、ページを下部までスクロールするとスクロールボタンがあり、それを押すとページトップ(<div id=”a”>)に戻るようにjQueryを設置しています。
それでは、設置するには以下のコードを設置します！
HTMLを設定
まず、ページトップに戻るボタンは以下のようなコードを設置します。
<p class="pagetop"><a href="#">トップ</a></p>
CSSを設定
ボタンのCSSは例として以下のように設定しました。
.pagetop {
width: 200px;
float: right;
margin: 0 20px 20px 0;
background: #3333ff;
padding: 10px 20px;
text-align: center;
}
.pagetop a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
jQueryを設定
では実際にページトップに戻るjQueryのコードを設置してみましょう！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var pagetop = $('.pagetop');
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
5行目で、変数として.pagetopをpagetopと設定しています。
その上で、6～8行目で変数pagetopをクリックした時にページトップに戻るよう指定しています。
ちなみに
$('body, html').animate({ scrollTop: 0 }, 500);
上の500という数値はページトップに戻るまでのスピードを設定しているので、この数値が200、100というように小さくなるとスピードが速くなります。
2. ページをスクロールするとページトップに戻るボタンが現れるよう設定
次に以下のデモページのようにページをスクロースるするとページトップに戻るボタンが現れるようjQueryを設定してみます。
HTMLを設置
まず、HTMLコードを以下のように記述します。
<p class="pagetop"><a href="#">トップ</a></p>
CSSを設定
続いてCSSを設定します。
.pagetop {
position: fixed;
width: 200px;
right: 20px;
bottom: 0;
background: #3333ff;
padding: 10px 20px;
text-align: center;
}
.pagetop a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
ここで気を付けるべきは、ボタンのCSSにposition: fixed;を記述して位置を固定するということと、この時にrightとbottomで隙間を設定する、ということです。
※ちなみにこの時にfloat設定しても意味がないのでお気を付けて！
jQueryを設定
では実際にページトップに戻るjQueryのコードを設置してみましょう！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var pagetop = $('.pagetop');
pagetop.hide();
$(window).scroll(function () {
if($(this).scrollTop() > 50) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
まず5行目でclass名pagetopを変数pagetopにしています。
そして、6行目でデフォルトではボタンを非表示に設定しており、その上で7～12行目でページをスクロールするとボタンが現れるように設定しています。
if($(this).scrollTop() > 50) {
上のコードで、ページ上部から50pxスクロールしたらボタンが現れるよう設定していますので、ボタンを表示させるにはページをスクロールしてからどれくらいにするのか、というのを設定できます。
まとめ
以上がページトップボタンの設置方法になります！この機能はサイトを制作する上でユーザーにとって便利な機能になるので、是非とも設置してみましょう！
