ISHI NOTE jQery初心者でも簡単！スクロールして「ページトップへ戻る」ボタンを設置する方法

jQery初心者でも簡単！スクロールして「ページトップへ戻る」ボタンを設置する方法

WEBサイトやブログの画面右下にあって、クリックするとス～っと画面上までスクロールしてくれる「ページトップへ戻る」ボタン。

いかにもプログラムで作りました的な動きなので、jQeryを学んだら、真っ先にやってみたいプログラムの一つではないでしょうか。

僕自身、jQeryを学んだ当初はとにかく何か動かしたいと思って、この「トップへ戻る」ボタンを作って、一日中スクロールして遊んでいた記憶があります（笑）

今回はそんな便利で楽しい「ページトップへ戻る」ボタンの作り方を解説したいと思います。

ページトップへ戻るボタンの実装方法

jQeryライブラリの設置

まず、jQeryを使って動きを作っていくので、サイトの<head>～</head>の間に以下のコードを設置してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

HTMLコードを書く

次に、ページトップへ移動するために必要なボタンをHTMLコードで作っていきます。

 <p id="page-top" class="page-top"><a href="#">ページトップ</a></p>

設置場所は</footer>タグの手前とかで良いかと思います。fontawsomeなどのWEBフォントを使えばオシャレなボタンを作ることができますが、今回はサンプルということなので、シンプルにテキストにしました。

それから要素をjqeryで操作するための「page-top」というid属性値と、ボタンをデザインするための「page-top」というclass属性値を付けています。

CSSコードを書く

先ほど、作成したボタンにCSSで装飾していきます。

.page-top {
    position: fixed;
    right: 0;
    margin: 0;
    font-size: 12px;
    font-weight: bold;
}

.page-top a {
　　display: block;
　　width: 100px;
   height: 50px;
   padding: 10px;
　 color: #fff;
   text-align: center;
   background: #323944;
   opacity: 10;        
}

position:fixedを使って絶対値を指定し、ボタンを常に画面に表示するようにしています。位置はright: 20px、bottom:20pxと指定し、画面の右下に固定。あとは大きさや色を指定しているだけなので、好みで自由に変えてもOKです。

jQeryコードの書き方

それでは、動きをつけるためにjQeryを書いていきましょう。

書く場所は、別ファイルを用意した方が管理しやすいと思いますが、HTMLのhead内でもとくに問題はありません。どちらにしても設置するときは以下のコードを<script>～</script>で囲んでください。

$(function(){
	$('#page-top').hide();
	$(window).scroll(function(){
		if ($(this).scrollTop() > 200) {
			$('#page-top').fadeIn();
		}
		else {
			$('#page-top').fadeOut();
		}
	});
	$('#page-top').on('click',function(){
		$('html,body').animate({
			scrollTop: 0 }, 200);
			return false;
　　　　});
});

コードを簡単に説明すると、２行目にある$(‘#page-top’).hide();で、まずボタンを非表示にしています。

次に4行目にあるif ($(this).scrollTop() > 200)で、200pxスクロールされたらボタンを$(‘#page-top’).fadeIn();で表示させ、それ以外の条件であれば、$(‘#page-top’).fadeOut();でボタンを非表示にしています。もし表示する位置を変更したければ、200という数字を変えてください。

そして、11行目のコードがページのトップへスクロールさせるメインコードになります。#page-topをクリックすると、animateで動きをつけて、ページトップである0pxのところまでスクロールさせています。

カッコ内に書かれている200という数字はスクロールして戻るまでの時間を表しているので、もう少し遅くしたければ数字を増やしてください。1000が1秒になっているので、200は0.2秒ということになります。

return false;は、aタグのリンクである「#」を消すために必要なので、必ず記入してください。