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

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

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

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

と〜げ

このブログの戻るボタンは,テーマ(sango)にデフォルトで設置されています.

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

と〜げ

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

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

サンプルコード

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

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

htmlファイル:index.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;
}
jsファイル:script.js
$(function(){
  /*初期状態ではボタンが隠れている*/
  $('#back_to_top').hide();

  /*スクロールするとボタンが現れる*/
  $(window).scroll(function() {
    if($(this).scrollTop() > 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;
  });

});

学び方

私は,progateのjQueryの上級編で学びました.

 progate

と〜げ

やってみると,結構簡単にできました.

1 COMMENT

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です