KUSU'S SITE
2015年12月3日

【jQuery】ページトップに戻るボタンを設置してみよう!

  

 数あるサイトの中には、ページを下にスクロールしていくとサイトの上部に戻るボタンが現れ、それを押すとぺージトップに戻るボタンを見ることがあると思います。
そこで今回はページトップに戻るボタンの設置方法を解説したいと思います!

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="http://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行目で、変数として.pagetoppagetopと設定しています。
その上で、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;を記述して位置を固定するということと、この時にrightbottomで隙間を設定する、ということです。
※ちなみにこの時にfloat設定しても意味がないのでお気を付けて!

jQueryを設定

 では実際にページトップに戻るjQueryのコードを設置してみましょう!

<script src="http://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スクロールしたらボタンが現れるよう設定していますので、ボタンを表示させるにはページをスクロールしてからどれくらいにするのか、というのを設定できます。

まとめ

 以上がページトップボタンの設置方法になります!この機能はサイトを制作する上でユーザーにとって便利な機能になるので、是非とも設置してみましょう!

スポンサーリンク
スポンサーリンク

コメントを残す




スポンサーリンク

ホームページ制作について

ホームページの制作依頼希望の方
はまず↓をクリック!
ホームページの制作依頼希望の方はまず↓をタップ!
サービスの詳細

WordPress講習会について

WordPress講習会について
気になる方ははまず↓をクリック!
WordPress講習会について気になる方はまず↓をタップ!
サービスの詳細

TWITTER

ページトップに戻る