今回はWEBサイトでよく使われる「TOPへ戻るボタン」の作り方を紹介します！

TOPへ戻るボタンを押すことで、WEBページの一番上までスムーズにスクロールしてくれます。

コピペできるので、是非真似してみてください。

【jQuery】TOPへ戻るボタンの作り方

完成形はこちらです。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

簡単なWEBページの中に「TOPへ戻るボタン」を入れてみました。

下にスクロールしていくと、右下にボタンが表示されます。

ボタンをクリックすると、TOPまで自動でスクロールしてくれます。

HTML

!-- TOPへ戻るボタン -->
<div class="top">
    <a href="#">TOP</a>
</div>

topのクラスを持った親要素の中に、aタグを用意しました。

CSS

* TOP */

.top {
    position: fixed;
    right: 20px;
    bottom: 10px;
    display: none;
}
.top a {
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 8px;
    text-decoration: none;
}
.top a:hover {
    opacity: 0.8;
}

◎3行目〜8行目

「position: fixed;」でボタンを固定にし、「right: 20px;」と「bottom: 10px;」で右下に配置しました。

そして「display: none;」で通常は表示されないようにします。

◎9行目〜15行目

aタグを「display: inline-block;」でインラインブロック要素にし、幅と色を指定していきます。

◎16行目〜18行目

aタグをhoverした際に少しボタンの色を薄くしたいので、「opacity: 0.8;」を指定します。

JavaScript

まずはbodyの閉じタグの上に以下のjQueryのコードを記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

そしてJavaScriptのコードはこちら。

jQuery(window).on("scroll", function ($) {
    if (jQuery(this).scrollTop() > 100) {
        jQuery('.top').show();
    } else {
        jQuery('.top').hide();
    }
});

jQuery('.top').click(function () {
    jQuery('body,html').animate({
        scrollTop: 0
    }, 500);
    return false;
});

100の数字は、何pxスクロールしたら「TOPへ戻るボタン」が表示されるのか決めることができます。

今回は100pxスクロールすると、ボタンが表示されるようにしました。

次に500の数字は、何秒かけてTOPまでスクロールするのか時間を決めることができます。

上記の2つの数値は、ご自由に変えてみてください！

まとめ

以上が、「TOPへ戻るボタン」の作り方でした。

WEBサイトでよく使われるので、是非理解しておきましょう！