【jQuery】ページトップへ戻るボタン【スクロール途中から表示】

2023年1月16日2023年2月2日

記事内に広告を含みます

パソ君

スクロール途中から表示される
ページトップへ戻るボタンはどうやって実装するの？

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

よく「ページトップボタン」が、少しスクロールしてから表示されるサイトがありますよね。

下記みたいに↓

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

ジト

すぐにできるよ！

ということで、この記事では「スクロール途中から表示されるページトップへ戻るボタンリンクを作成」について解説していきます！

通常のページトップボタン作成は下記をどうぞ↓

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

この記事でわかること

・ページトップへ戻るボタン【スクロール途中から表示】

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

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

【jQuery】ページトップへ戻るボタン【スクロール途中から表示】
- 途中から出現するように指定
【jQuery】ページトップへ戻るボタン【スクロール途中から表示】：まとめ

【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;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.page-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

$(window).on('load scroll', function(){
    if($(this).scrollTop() > 1) {
        $('.page-top').addClass('show');
    }else{
        $('.page-top').removeClass('show');
    }
});

途中から出現するように指定

$(window).on('load scroll', function(){
    if($(this).scrollTop() > 1) {
        $('.page-top').addClass('show');
    }else{
        $('.page-top').removeClass('show');
    }
});

「ページ読み込み後、もしくはスクロール時に、ウインドウのトップ位置が1pxより大きかったらshowクラスを付与。1pxより小さかったらshowクラスを外す」という意味。

つまり1pxでもスクロールしたらページトップボタンが反映するってことですね。

このpx数値は、ご自身の案件でカスタマイズしてください！

ジト

px指定じゃなく、変数を代入してセクション部分にウインドウ位置が入ったらなどの指定もあり！

スクロールフェードインに関しては
下記記事を参考にどうぞ↓