この記事では，トップへ戻るボタンの作り方について紹介します．
トップへ戻るボタンは，このブログにも設置してあります．少し下にスクロールしたら，右下に出てくるこういうやつです．
クリックすると，スクロールしていた位置から，トップへ戻るスクロールが自動でされます．
と〜げ
このブログの戻るボタンは，テーマ（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の上級編で学びました．
[…] 【jQuery】アイコン変化あり：複数の項目を１つずつ表示する方法(click,toggle) トップへ戻るボタンの作り方【jQuery】 […]