こういう疑問に答えます。
この記事を読めば当サイトのように「トップへ戻るボタン」がカンタンに実装できるようになりますので、ご安心ください。
トップへ戻るボタンの実装方法
こちらのコピペでOKです👇
See the Pen
zYvWRVO by takumi takekawa (@takumi7293)
on CodePen.
カンタン解説
#top-cover{
font-size: 3rem;
position: fixed;
bottom:0;
right:0;
cursor: pointer;
display: none;
}
トップへ戻るボタンの一番大きいかたまりである#top-coverをCSSでdisplay:none;にしています。
これにより、最初にトップへ戻るボタンを表示させないようにしています。
$(document).ready(function() {
const pagetop = $("#top-cover");
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 200);
return false;
});
});
if ($(this).scrollTop() > 300)は、「一番上から300px画面を下に動かしたら」という意味になります。
一番上からスクロールしたとき、表示タイミングを上に近づけたい場合は300の値を小さくして100などに。
下に近づけたいときは300を500などにしましょう。
サンプルを3つ用意します。
if ($(this).scrollTop() > 100の場合👇
See the Pen
abvYYVm by takumi takekawa (@takumi7293)
on CodePen.
if ($(this).scrollTop() > 300の場合👇
See the Pen
zYvWRVO by takumi takekawa (@takumi7293)
on CodePen.
if ($(this).scrollTop() > 500の場合👇
See the Pen
RwWMMjQ by takumi takekawa (@takumi7293)
on CodePen.
表示されるタイミングが違いますね♪
また、$('body, html').animate({ scrollTop: 0 }, 200);
は、「0.2秒かけて上から0pxのところ（＝一番上）に移動する」という意味です。
こちらもまたサンプルを3つ用意します。
$('body, html').animate({ scrollTop: 0 }, 200);の場合👇
See the Pen
zYvWRVO by takumi takekawa (@takumi7293)
on CodePen.
$('body, html').animate({ scrollTop: 0 }, 10);の場合👇
See the Pen
OJyvvoa by takumi takekawa (@takumi7293)
on CodePen.
1000分の1秒なので、10は、0.01秒で上に移動という意味です。
クリックしたら一瞬ですね笑。
$('body, html').animate({ scrollTop: 0 }, 10000);の場合👇
See the Pen
GRpxxYB by takumi takekawa (@takumi7293)
on CodePen.
クリックすると10秒でノロノロと上に行きます。
まあ、あんまり需要なさそうですけどね笑。
まとめ：トップに戻るボタンはコピペでカンタン
この記事では、トップに戻るボタンをご紹介しました。
トップに戻るボタンは結構需要がありそうなので、ぜひ習得してください(*´∀｀*)
それでは以上になります。
「スクロールでアニメーションさせるのを実装したい」という方は下記の記事をどうぞ。