IT Programming

【コピペでちょーカンタン!】トップへ戻るボタンの実装方法

動く歩道,画像

 

トップへ戻るボタンが実装したいけど、むずかしいのかなあ。カンタンにできる方法があれば教えて下さい。

 

こういう疑問に答えます。

 

この記事を読めば当サイトのように「トップへ戻るボタン」がカンタンに実装できるようになりますので、ご安心ください。

 

トップへ戻るボタンの実装方法

こちらのコピペで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秒でノロノロと上に行きます。

まあ、あんまり需要なさそうですけどね笑。

 

まとめ:トップに戻るボタンはコピペでカンタン

この記事では、トップに戻るボタンをご紹介しました。

トップに戻るボタンは結構需要がありそうなので、ぜひ習得してください(*´∀`*)

 

それでは以上になります。

 

「スクロールでアニメーションさせるのを実装したい」という方は下記の記事をどうぞ。

スクロールでアニメーション 実装方法


スポンサードリンク

-IT, Programming

© Copyright March/2020 タクミ