スムーススクロールを実装！ふわっと出て決まった高さで止まるトップへ戻るボタン

Web制作 2020-04-06

縦に長いwebページの場合、「トップへ戻るボタン」でページの上端まで一気に戻れると非常に便利です。しかし、「最初に表示される画面ではボタンは非表示にしたい！」「フッターまではボタンはついてこなくていい！」ということもあるでしょう。

そこで今回は、

1.一定の高さまでスクロールしたらボタンがフェードインする。

2.任意の高さまで行ったらピタッとトップボタンを固定する

3.ボタンを押したらスクロールしながらトップまで移動する

上記３つを兼ね備えたトップへ戻るボタンの実装方法をご紹介していきます。

HTML

「topBtn」ボタンというidをつけたaタグを準備します。href属性には＃を設定し、ページの一番上に戻るようにします。このaタグをcontentというidのついたdiv要素で囲みます。今回はこのdiv要素より下に行かないように設定していきます。

※わかりやすくするためにheader・footerタグの記述をしているので、使う時には必要ないです。

<header id="header"></header>
<div id="content" class="top">
    <!-----ここにコンテンツが入る----->
    <a href="#" id="topBtn">TOP</a>
</div>
<footer id="footer"></footer>

CSS

下にスクロールしたら、#topBtnのpositionをabsoluteに変更して親要素の高さでボタンを固定するため、#contentにpoistion:relativeを指定します。その他、わかりやすくするためにトップボタンを装飾していきます。装飾の部分はお好みで設定してください。

#content{
    position: relative;
}

#topBtn {
    /*-----必須-----*/
    position: fixed;
    bottom: 10px;
    right: 10px;
    
    /*-----装飾-----*/
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    background-color: #333;
    color: #fff;
}

JavaScript

最後にJavaScriptを記述していきます。解説はコード内に記載しました。コード前半はボタン表示・非表示、ポジションの変更、後半のコードはスムーススクロール実装のコードになっています。

JQueryで記述していますので、本体の読み込みを忘れずに行ってください。

$(document).ready(function () {
    $("#topBtn").hide();　//ボタンを非表示にする
    $(window).on("scroll", function () {
        if ($(this).scrollTop() > 100) { //ページの上から100pxスクロールした時
            $("#topBtn").fadeIn("fast"); //ボタンがフェードインする
        } else {
            $("#topBtn").fadeOut("fast");　//ボタンがフェードアウトする
        }
        scrollHeight = $(document).height(); //ドキュメントの高さ 
        scrollPosition = $(window).height() + $(window).scrollTop(); //現在地 
        footHeight = $("footer").innerHeight(); //止めたい位置の高さ(今回はfooter)
        if (scrollHeight - scrollPosition <= footHeight) { //ドキュメントの高さと現在地の差がfooterの高さ以下の時
            $("#topBtn").css({
                "position": "absolute", //pisitionをabsoluteに変更
            });
        } else { //それ以外の場合は
            $("#topBtn").css({
                "position": "fixed", //固定表示
            });
        }
    });


//スムーススクロール設定
    $('#topBtn').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);　//スムーススクロールの速度
        return false;
    });
});

これで完成です！トップボタンを実装する際にはフッターにかぶって視認性が悪くなったり、ボタンが情報を隠してしまう場合もあるので、その場合は今回のようにボタンはある一定の高さから下にはいかないようにするといった処理を行うことで、サイトの使いやすさに繋がってくるのではないかなと思います！