WEB制作で「これって絶対使うじゃん」的なやつ

もう、基本中の基本です。

そう、トップへ戻るボタン。
するするする～って戻るやつ （←ウチではがっくんがその役割を果たしてくれています）


てっかさ～、こんなん絶対条件やん。なんならブラウザに標準搭載してもええんちゃうか？と思う今日このごろ。

でもやっぱし、そこすらも可愛くデザインしたい！
というか、必要。

ですのでこれから、WEB制作を始めよう！ってひとは簡単だから覚えちゃってください。

簡単にトップへ戻るスクロールボタンを設置するjs

■js
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {//トップから100pxスクロールしたら
topBtn.fadeIn();//ボタンがフェードしながら出てくる
} else {//逆にトップから100px以内になったら
topBtn.fadeOut();//ボタンがフェードしながら消える
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0}, 500);//0.5秒かけてトップへ戻る
return false;
});
});

■css
#page-top {
width:100px;//幅
height:100px;//高さ
position: fixed;//固定
bottom: 20px;//下から
right: 20px;//右から
z-index: 9999;
}
//画像を使用する場合は画像サイズを指定//
#page-top img{
width:100px;//幅
height:100px;//高さ
ofject-fit:cover;
}
#page-top a {
display: block;//アンカーリンク全体をクリック要素に
}
#page-top a:hover {
text-decoration: none;//マウスオーバーしたときの余分な挙動を消しています
}

■html
<p id="page-top"><a href="#wrap"><img src="好きな画像を指定" alt="トップへ" /></a></p>