【jQuery・CSS】ページトップへ戻るボタンリンクを作成【コピペOK】

記事内に広告を含みます

パソ君

・ページトップへ戻るボタンはどうやって実装するの？

こんな疑問にお答えします。

よくページの一番上に戻るためのボタンを見かけますよね？？このブログでも右下に出てるかと。

このボタンをクリックすると、ススーとトップ位置まで移動してくれます。

下記みたいに↓

これ実は簡単に実装できちゃいます。

ジト

すぐにできるよ！

ということで、この記事では「ページトップへ戻るボタンリンクを作成」について解説していきます！

この記事でわかること

・ページトップへ戻るボタンリンクを作成【jQuery】
・ページトップへ戻るボタンリンクを作成【CSS】

ページ内リンクのスクロール方法を調整したいなら下記記事をどうぞ↓

2023年1月16日【CSS・jQuery】ページ内リンクのスムーススクロール作り方【コピペOK】

【jQuery】ページトップへ戻るボタンリンクを作成【コピペOK】
【CSS】ページトップへ戻るボタンリンクを作成【コピペOK】
- CSSのみのページトップボタン注意点
【サンプル】ページトップへ戻るボタンリンクを作成【コピペOK】
【jQuery・CSS】ページトップへ戻るボタンリンクを作成【コピペOK】：まとめ

【jQuery】ページトップへ戻るボタンリンクを作成【コピペOK】

ますはjQueryを利用したページトップボタン作成方法を紹介していきます。

そんなサンプルがこちら↓

See the Pen ➂スムーススクロール by jito-coder (@jito-coder) on CodePen.

<main class="main">
    <h1 class="title">ここがページトップです</h1>
    <a href="#" class="page-top">
        <div class="page-top__arrow"></div>
    </a>
</main>

.page-top {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    background-color: #000066;
    border-radius: 100%;
    cursor: pointer;
    transition: opacity .3s ease;
    z-index: 5;
}
.page-top:hover {
    opacity: .7;
}
.page-top__arrow {
    height: 15px;
    width: 15px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: translateY(3px) rotate(45deg);
}

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

右下のボタンをクリックしたら、ページトップの位置までススーとスクロールしてくれますよね！

このコードの中で重要な点がこちら↓

ボタン用のHTMLを組み立てる
CSSでデザインをカスタマイズ
クリックしたらトップ位置までスクロールする指定

順に見ていきましょう。

➀：ボタン用のHTMLを組み立てる

まずHTMLでページトップボタン用のコードを組み立てます。
下記のように組み立てました↓

<a href="#" class="page-top">
    <div class="page-top__arrow"></div>
</a>

こちらはボタンのデザインによって組み立て方が変わるので、参考程度に。
とりあえずクリックするための土台を作成しましょう。

人によってはbuttonタグで作成する方もいます。
調べた中でaタグで作成する方が多いので、僕はaタグで実装しています！

➁：CSSでデザインをカスタマイズ

そしてCSSでボタンのデザインをカスタマイズします。
（これも案件により異なるので参考程度に）

ボタン背景部分

まずボタン背景部分↓

// ボタン背景部分
.page-top {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    background-color: #000066;
    border-radius: 100%;
    cursor: pointer;
    transition: opacity .3s ease;
    z-index: 5;
}

右下に固定させるために「fixed」を指定。
クリックを促すために「pointer」を指定。
固定させてる時の被りを対策するために「z-index」を指定。

ボタンhover時

.page-top:hover {
    opacity: .7;
}

hoverした時のアニメーションとして、透過を指定。背景色を変えるようなカスタマイズでも良いですね！

ボタン矢印部分

// ボタン矢印部分
.page-top__arrow {
    height: 15px;
    width: 15px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: translateY(3px) rotate(45deg);
}

ボタン真ん中にある矢印を作成していきます。
簡単な形なら疑似要素を使わずに実装できちゃいます！

➂：クリックしたらトップ位置までスクロールする指定

最後にjQueryにて、クリック後にトップ位置までスムーススクロールをさせる指定をしていきます。

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

このコードを簡単に説明すると
「.page-topというクラスを持った要素をクリックしたら、body,htmlに対してトップ0位置まで0.5秒かけて移動する」
という意味。

500という数字はミリ秒を表しており、好きな数字に変えることでスクロールにかかる秒数のカスタマイズが可能です。