1. ホーム
  2. ホームページの作り方
  3. Java Script / jQuery
  4. jQueryを使ってページのトップへ戻るボタンを設置！なめらかな動きを実装しよう
  • 最終更新日
  • Java Script / jQuery

jQueryを使ってページのトップへ戻るボタンを設置！なめらかな動きを実装しよう

例えばページの上部にあるナビゲーション（各ページへのリンク）へすぐ戻れるように「トップへ戻る」のボタンがあると便利だと思いませんか？

ホームページのデザインや運営者の意向によるものなので、この機能がないといけない訳ではありません。ちなみにチェピレアでは付けていません。

個人的に以前はかなりの確率で設置していましたが、最近減ってきたのかな？でも、まだまだ使える機能ですし設置も簡単なのでご紹介しておきます。

トップへ戻るボタンの設置方法

チェピレアでは「トップへ戻る」ボタンを設置していないんですが、その理由は、上部のナビゲーションがスクロールしても付いてくるように設定しているからです。

この場合、どのページのどの場所にいても他のページへ移動できます。

ですが上部が付いてこない場合であれば、情報が多くてどんどんスクロールするページの途中で他のページへ移りたくなっても、スクロールした分だけ戻らなければいけない。

地味にメンド―ですよね？下手したらサイト自体から閲覧してくれているユーザーが離れてしまいます。

ちょっとした事ですが、ユーザーにとっては便利な機能なので運営しているサイトに合わせてぜひ取り入れていただきたいです。

それではjQueryを使いますので下準備をおこないましょう。「jQueryを使うために必要な「jquery.min.js」ファイルをダウンロードしよう」で「jquery.min.js」をダウンロードしておきます。

jQueryファイルのバージョンに合わせてhtmlの記述も変更してください。※例）「jquery.min.js」→「jquery-3.5.1.min.js」など。

こちらも見てください

「jquery.min.js」ファイルが用意できたら下記のようにファイルを設置していきます。

それでは「index.html」と「main.js」の記述も見ていきましょう。コピペで設置してしていただいてオッケーです！

index.html

            
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3. <head>
    4. 
                
  4. <meta charset="UTF-8">
    5. 
                
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 
                
  6. <title>トップへ戻るボタンを設置よう</title>
    7. 
                
  7. <style>
    8. 
                
  8. * {
    9. 
                
  9.   margin: 0;
    10. 
                
  10.   padding: 0;
    11. 
                
  11.   box-sizing: border-box
    12. 
                
  12. }
    13. 
                
  13.  
    14. 
                
  14. .pagetop {
    15. 
                
  15.   width: 300px;
    16. 
                
  16.   margin: 1000px auto 200px
    17. 
                
  17. }
    18. 
                
  18.  
    19. 
                
  19. .pagetop a {
    20. 
                
  20.   color: #fff
    21. 
                
  21.   font-size: 16px
    22. 
                
  22.   line-height: 50px
    23. 
                
  23.   text-align: center
    24. 
                
  24.   text-decoration: none
    25. 
                
  25.   background: #f00
    26. 
                
  26.   display: block
    27. 
                
  27. }
    28. 
                
  28. </style>
    29. 
                
  29. </head>
    30. 
                
  30. <body>
    31. 
                
  31.   <div class="pagetop">
    32. 
                
  32.     <a href="#">トップへ戻る</a>
    33. 
                
  33.   </div>
    34. 
                
  34. <script type="text/javascript" src="js/jquery.min.js"></script>
    35. 
                
  35. <script type="text/javascript" src="js/main.js"></script>
    36. 
                
  36. </body>
    37. 
                
  37. </html>
    38.

main.js

            
    
                
  1. (function($) {
    2. 
                
  2.   var pagetop = $('.pagetop');
    3. 
                
  3.   pagetop.click(function () {
    4. 
                
  4.     $('body, html').animate({scrollTop: 0}, 500);
    5. 
                
  5.     return false;
    6. 
                
  6.   });
    7. 
                
  7. })(jQuery)
    8.

はい、これで設置完了です。サンプルとして「トップへ戻る」ボタンを設置しますのでクリックしてみてください。

トップへ戻る

ちゃんとページのトップへ戻る事ができたでしょうか？記述している大事なトコをおさらいしておきましょう。

            
    
                
  1.   <div class="pagetop">
    2. 
                
  2.     <a href="#">トップへ戻る</a>
    3. 
                
  3.   </div>
    4.

HTMLファイルに記載している部分ですが、今回はdivに「pagetop」というclass名を付けています。ここのclass名は何でも構いませんし、「class」じゃなくて「id」でも構いません。

            
    
                
  1. var pagetop = $('.pagetop');
    2.

class名を変更する場合はJSファイルの「.pagetop」も変更します。「id」にした場合なら「.」を「#」に変えて「#pagetop」と記述すればオッケーです。

            
    
                
  1. $('body, html').animate({scrollTop: 0}, 500);
    2.

あとは「500」と記述している部分ですが、ここはトップまでの移動に「0.5秒」かけるという意味なので好みの速さに変更して頂けます。例）「1秒＝1000」です。

「トップへ戻る」の実装自体は簡単なのでユーザーの使いやすさなども考慮した上で試してみてください。

jQueryを使うために必要な「jquery.min.js」ファイルをダウンロードしよう 横並びの要素の高さを揃えるmatchHeight.jsの導入方法と使い方をご紹介

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記