この記事では,トップへ戻るボタンの作り方について紹介します.
トップへ戻るボタンは,このブログにも設置してあります.少し下にスクロールしたら,右下に出てくるこういうやつです.
クリックすると,スクロールしていた位置から,トップへ戻るスクロールが自動でされます.
と〜げ
このブログの戻るボタンは,テーマ(sango)にデフォルトで設置されています.
今回は,jQueryでトップへ戻るボタンを作る方法を紹介していきます.
ただし,詳しい作り方を説明せず,ここでは,私が作成したサンプルコードと,私が実際に学んだ作り方の学び方ついて紹介します
トップへ戻るボタンの作り方
サンプルコード
こちらが,jQueryで作ったトップへ戻るボタンです.スクロールしてみてください.
See the Pen
backtotop by Yoshitaka (@YOSHITAKA3)
on CodePen.
htmlファイル:index.html
1 2 3 4 |
<!--jQuery読み込み--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <img src="https://toge510.com/wp-content/uploads/2019/03/rowan-chestnut-175871-unsplash-1.jpg" /> |
1 |
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】アイコン変化あり:複数の項目を1つずつ表示する方法(click,toggle) トップへ戻るボタンの作り方【jQuery】 […]