jQueryで作るWebページ最上部へ戻るスムーズスクロールボタン

  • LINEで送る

Webページってコンテンツが増えると,どんどん長くなっていきますよね.ヘッダーにサイトメニューを置いていたりすると,一番上まで戻らないといけません.結構めんどくさかったりします.もちろんスティッキヘッダーを使ったり,サイドバーを使ったりすれば,解決できますが,上の方のコンテンツを見るために戻ることもあると思います.そこで下から上へ戻るスムーズスクロールボタンがあれば,親切なサイトになるでしょう.今回はWebページ最上部へ戻るスムーズスクロールボタンをjQueryとCSSで作っていきます.

サンプルページ

今回,スムーズスクロールを作成する手順は以下の6つです.

  • footerの子要素にWebページの最上部に戻るボタンを作る
  • 上矢印をCSSでつくる
  • 作ったボタンが常に画面右下にくるように配置する(position: fixed)
  • 画面が最上部にある場合は,ボタンは必要ないので,画面外に配置する
  • スクロールをするとボタンが右側からスライドインしてくるようにする
  • ボタンを押したら画面が最上部に移動する処理を行う

ボタンの出し入れはjQueryでクラスの追加・消去を行い,実際のスクロールはanimate()メソッドを使用して行います.そこまで難しい処理はしません.

それでは,コードの説明をしていきます.ファイルの構成は以下の通りです.

HTML

<footer id="page-footer" role="main-info">
    <small class="copyright">TamoTechBlog © Maeda Tamon tamontech.blog</a></small>
    <button class="backTop"><span class="arrow"></span></button>
</footer>

今回は最上部へ戻るスムーズボタンを作成するのでそれ以外の部分は省いています.記事の最後にはサンプルページのコードをダウンロードできるのでそこで確認してみてください.

footerの子要素にbuttonタグがあります.buttonタグの子要素にarrowクラスのspanタグがあります.このspanタグで上向の矢印をCSSで作成します.

SCSS(CSS)

footer {
    width: 100%;
    height: 5vh;
    color: #ffffff;
    background-color: #383838;
    position: relative;
    small {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    button {
        height: 70px;
        width: 80px;
        position: fixed;
        bottom: 6vh;
        right: -80px;
        border: none;
        background: #383838;
        opacity: 0.6;
        border-radius: 5px 0 0 5px;
        transition-duration:300ms;
        
        .arrow {
            box-sizing: border-box;
            position: absolute;
            top: 20px;
            width: 30px;
            height: 30px;
            border-top: solid 7px white;
            border-left: solid 7px white;
            transform:rotate(45deg);
            transform-origin: left top;
        }
        
    }
    .to-top {
        right: 0px;
    }
}

CSSで重要なところはbuttonに{position:fixed}を設定することです.これを設定することで,レイアウトに影響を与えず,常に右下に配置することができます.buttonに{right:-80px}を設定し画面外右側に配置しています..to-topはHTMLにはないクラスです.このクラスを画面スクロール時に追加・消去します.ここでは{right:0}を設定し,buttonが右側から出現するようにします.

jQuery(main.js)

$('.backTop').each(function(){
    var $window = $(window);
    //上へ戻るボタンの出現設定
    $window.on('scroll', function(){
        //スクロール量が100px以上ならto-topクラスを追加
        if ($(this).scrollTop() < 100 ){
            $('.backTop').removeClass('to-top');
        } else {
            $('.backTop').addClass('to-top');
        }
    });

    //scrollTop()が適用される要素を取得
    var el = scrollableElement('html','body');

    //クリックされたら一番上に戻る
    $(this).on('click',function(event){
        event.preventDefault();
        $(el).animate({scrollTop: 0},300);
    });

    //scrollTop()が適用される要素を取得する関数
    function scrollableElement(){
        var i, len, el, $el, scrollable;
        for ( i = 0, len = arguments.length; i < len; i++){
            el = arguments[i],
            $el = $(el);
            if ($el.scrollTop() > 0){
                return el;
            } else {
                $el.scrollTop(1);
                scrollable = $el.scrollTop() > 0;
                $el.scrollTop(0);
                if (scrollable){
                    return el;
                }
            }
        }
        return [];
    }
    
    //ウィンドウのスクロールイベントを発生させる
    $window.trigger('scroll');

});

jQueryではクラス追加によるボタンのスライドイン・スライドアウトとanimate()メソッドによる最上部へのスムーズスクロールの2つの処理が行われています.scrollableElement()関数はscrollTopが適用される要素を調べる関数です.ブラウザごとにscrollTopが適用される要素は「html」か「body」のどちらかになります.これをまず調べてからscrollTop()を使用しないとうまく動かない場合があります.必ずこの関数を通すようにしましょう.最後に中途半端な位置でロードした場合にボタンを出現させるために,スクロールイベントを発生させます.

今回はボタンが右側から出現するようなアニメーションでしたが,他にもいろいろなアレンジができると思います.是非試してみてください.

サンプルページはこちらからも閲覧できます.

サンプルページのコードはこちらからダウンロードできます.

SNSでもご購読できます。

コメントを残す

*