WEB

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

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

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

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

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

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

jQeryライブラリの設置

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

 HTMLコードを書く

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

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

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

 

CSSコードを書く

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

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

 

jQeryコードの書き方

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

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

コードを簡単に説明すると、2行目にある$(‘#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タグのリンクである「#」を消すために必要なので、必ず記入してください。

最後に

ざっと簡単に説明しましたが、たったこれだけのコードでページトップまで移動するスクロール機能を持たせることができるんですから、jQeryって凄いですね。

プログラムに少しでも興味があれば、ぜひ試してみることをオススメします。

ページトップへ戻る機能があった方が、ユーザービリティ―も向上すると思いますよ。