トップへ戻るボタンの作り方【jQuery】

この記事では，トップへ戻るボタンの作り方について紹介します．

トップへ戻るボタンは，このブログにも設置してあります．少し下にスクロールしたら，右下に出てくるこういうやつです．

クリックすると，スクロールしていた位置から，トップへ戻るスクロールが自動でされます．

と〜げ

このブログの戻るボタンは，テーマ（sango）にデフォルトで設置されています．

今回は，jQueryでトップへ戻るボタンを作る方法を紹介していきます．

と〜げ

ただし，詳しい作り方を説明せず，ここでは，私が作成したサンプルコードと，私が実際に学んだ作り方の学び方ついて紹介します

トップへ戻るボタンの作り方
- サンプルコード
- 学び方

トップへ戻るボタンの作り方

サンプルコード

こちらが，jQueryで作ったトップへ戻るボタンです．スクロールしてみてください．

See the Pen
backtotop by Shinji Goto (@YOSHITAKA3)
on CodePen.

htmlファイル：index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <!--jQuery読み込み-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <img src="https://toge510.com/wp-content/uploads/2019/03/rowan-chestnut-175871-unsplash-1.jpg">
    <div class="pagetop" id="back_to_top">
      <i class="fa fa-chevron-up" aria-hidden="true"></i>
    </div>
    <!--script.js読み込み-->
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

cssファイル：style.css

img {
  width:100%;
}

.pagetop {
  cursor:pointer;
  position:fixed;
  bottom:50px;
  right:50px;
  background-color:#ececec;
  padding:20px;
  border-radius:50%;
  opacity:0.7;
  transition:all 1s;
}

.pagetop:hover {
  opacity:1;
}

.fa-chevron-up {
  font-size:30px;
}

img {

width:100%;

}

.pagetop {

cursor:pointer;

position:fixed;

bottom:50px;

right:50px;

background-color:#ececec;

padding:20px;

border-radius:50%;

opacity:0.7;

transition:all 1s;

}

.pagetop:hover {

opacity:1;

}

.fa-chevron-up {

font-size:30px;

}

jsファイル：script.js

$(function(){
  /*初期状態ではボタンが隠れている*/
  $('#back_to_top').hide();

  /*スクロールするとボタンが現れる*/
  $(window).scroll(function() {
    if($(this).scrollTop() &gt; 60) {
      $('#back_to_top').fadeIn("slow");
    } else {
      $('#back_to_top').fadeOut("slow");
    }
  });
　/*ボタンクリックでトップに戻る*/
  $('#back_to_top').click(function(){
    $('html, body').animate({
      'scrollTop':0
    },500);
    return false;
  });

});