【JavaScript】ページ上部に自動スクロールするボタンを実装する | HTML JavaScript スクロールボタン

今回は、JavaScriptでページ上部に自動スクロールするボタンを実装するまでの記事になります。

※当処理ではjQueryを使用しています。

 www.it-the-best.com

自動スクロールボタン

スクロールボタンのアイコンはFontAwesomeのフリーアイコンを使用しています。

fontawesome.com

ページ上部にスクロールする処理

scrollTo(0, 0);

scrollToメソッドは、ページの指定された座標にスクロールするメソッドです。

scrollTo(x座標,y座標)

第１引数(x座標)には、左上を基準にした水平軸上の位置を。第２引数(y座標)には、左上を基準にした垂直軸上の位置を指定します。

ページ上部にスクロールするため第１引数には０、第２引数にも０を指定します。

DEMO HTML CSS JS

 

<div id="sample-0-gototopbutton">
    <i class="fas fa-angle-double-up"></i>
</div>

#sample-0-gototopbutton{
    margin: auto;
    width: 40px;
    color: white;
    padding: 7px 15px;
    background: rgba(15, 15, 15, 0.8);
    box-shadow: 0 0 5px 0 #5d5d5d;
    border-radius: .2em;
    cursor: pointer;
}

$(function(){
    $("#sample-0-gototopbutton").click(function(){
        scrollTo(0,0);
    });
});

水平方向のスクロール量の保持

水平軸上のスクロール量を変えずにページ上部にスクロールしたい場合は、事前に水平軸上のスクロール量を取得し引数にその値を指定します。

scrollX

scrollTo(scrollX, 0);

スクロールをゆっくりさせる

上の処理だけでは一瞬でページ上部にスクロールしてしまうため、ゆっくりスクロールさせる処理を追加します。

DEMO HTML CSS JS

 

<div id="sample-gototopbutton">
    <i class="fas fa-angle-double-up"></i>
</div>

#sample-gototopbutton{
    margin: auto;
    width: 40px;
    color: white;
    padding: 7px 15px;
    background: rgba(15, 15, 15, 0.8);
    box-shadow: 0 0 5px 0 #5d5d5d;
    border-radius: .2em;
    cursor: pointer;
}

$(function(){
    $("#sample-gototopbutton").click(function(){
        autoScroll(scrollY);
        function autoScroll(y){
            if (y<-1 || scrollY>y+100) {
                return
            }
            y=y-30; // 垂直方向のスクロール量を減らす
            scrollTo(scrollX,y);
            setTimeout(autoScroll,1,y);
        }
    });
});

スクロールの速度を徐々に上げる

DEMO HTML CSS JS

 

<div id="sample-2-gototopbutton">
    <i class="fas fa-angle-double-up"></i>
</div>

#sample-2-gototopbutton{
    margin: auto;
    width: 40px;
    color: white;
    padding: 7px 15px;
    background: rgba(15, 15, 15, 0.8);
    box-shadow: 0 0 5px 0 #5d5d5d;
    border-radius: .2em;
    cursor: pointer;
}

$(function(){
    $("#sample-2-gototopbutton").click(function(){
        autoScroll(scrollY,3,0);
        function autoScroll(y,step,count){
            if (y<-1 || scrollY>y+100) {
                return
            }
            count+=1;
            if (count%60==0 && step>1) {
                step-=1;
            }
            y=Math.round(y-35/(step*1.5)); // 垂直方向のスクロール量を減らす
            scrollTo(scrollX,y);
            setTimeout(autoScroll,1,y,step,count);
        }
    });
});

スタイルの設定

当記事では、ページ右下部に固定して設置することを想定しているため下記のスタイルを設定します。

position: fixed;
right: 10px;
bottom: 10px;

隅っこに行き過ぎないためにrightとbottomを10pxにしています。

ある程度ページがスクロールされてから表示する

垂直方向にスクロールされていない場合や、スクロール量が少ない場合はトップに戻るボタンはあまり意味がないので、ある程度ページがスクロールされてから表示させるようにします。

#gototopbutton{
    transition: all 0.5s;
    opacity: 0;
}
#gototopbutton.visible{
    opacity: 1;
}

window.onscroll=function(){
    if (scrollY>=600 && !$("#gototopbutton").hasClass("visible")) {
        $("#gototopbutton").addClass("visible");
    } else if(scrollY<600 && $("#gototopbutton").hasClass("visible")){
        $("#gototopbutton").removeClass("visible");
    }
}

垂直方向のスクロール量の600を境に表示非表示を切り替えます。

サンプル

サンプルコード HTML CSS JS

 

<div id="gototopbutton">
    <i class="fas fa-angle-double-up"></i>
</div>

Copy

#gototopbutton{
    position: fixed;
    right: 10px;
    bottom: 10px;
    color: white;
    padding: 7px 15px;
    background: rgba(15, 15, 15, 0.8);
    box-shadow: 0 0 5px 0 #e4dada;
    border-radius: .2em;
    cursor: pointer;
    transition: all 0.5s;
    opacity: 0;
}
#gototopbutton.visible{
    opacity: 1;
}

Copy

$(function(){
    $("#gototopbutton").click(function(){
        autoScroll(scrollY,3,0);
        function autoScroll(y,step,count){
            if (y<-1) {
                return
            }
            count+=1;
            if (count%40==0 && step>1) {
                step-=1;
            }
            y=Math.round(y-200/step); // 垂直方向のスクロール量を減らす
            scrollTo(scrollX,y);
            setTimeout(autoScroll,1,y,step,count);
        }
    });
});

window.onscroll=function(){
    if (scrollY>=600 && !$("#gototopbutton").hasClass("visible")) {
        $("#gototopbutton").addClass("visible");
    } else if(scrollY<600 && $("#gototopbutton").hasClass("visible")){
        $("#gototopbutton").removeClass("visible");
    }
}

Copy