この記事では，トップへ戻るボタンの作り方について紹介します．
トップへ戻るボタンは，このブログにも設置してあります．少し下にスクロールしたら，右下に出てくるこういうやつです．
クリックすると，スクロールしていた位置から，トップへ戻るスクロールが自動でされます．
と〜げ
このブログの戻るボタンは，テーマ（sango）にデフォルトで設置されています．
今回は，jQueryでトップへ戻るボタンを作る方法を紹介していきます．
と〜げ
ただし，詳しい作り方を説明せず，ここでは，私が作成したサンプルコードと，私が実際に学んだ作り方の学び方ついて紹介します
トップへ戻るボタンの作り方
サンプルコード
こちらが，jQueryで作ったトップへ戻るボタンです．スクロールしてみてください．
See the Pen
backtotop by Yoshitaka (@YOSHITAKA3)
on CodePen.
htmlファイル：index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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> |
cssファイル：style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(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の上級編で学びました．
[…] 【jQuery】アイコン変化あり：複数の項目を１つずつ表示する方法(click,toggle) トップへ戻るボタンの作り方【jQuery】 […]