Vueの。トップへ戻ります

Vueの。トップへ戻ります

 

　　ページがアップし、スクロールバーダウン来るときバック関数の先頭へページの右下隅に表示されます。

　　

　　下にスライドするスクロールバーそう隠された、ショーに、：DIV（CSS書かれた内部スタイル）、このDIV関数は次のようにページに追加します。DIVはすぐにトップに戻る]をクリックします。

　　　　　< DIV 
             スタイル= "{ 
                高さ：60PX; 
                幅は50px; 
                位置：固定; 
                底：35px; 
                右：15ピクセル、
                背景色：＃f2f5f6; 
                ボックスシャドウ：0計6Px RGBA（0,0,0、0.12 ）; 
                テキスト整列：センター; 
                行の高さ：60PX; 
                色：＃1 1989fa; 
                カーソル：ポインタ; 
                -webkit-変換：回転（90deg）; 
                -moz-変換：回転（90deg）
                -O-変換：回転（ 90deg）; 
                -変換-ms：回転（90deg）。
                変換：回転（90deg）。
            }」
            V-IF = "btnFlag" 
            @click = "backTop" 
            > 
            < < 
        </ DIV >

 

 

　　EScriptコードを参加。

<SCRIPT> 
    エクスポートデフォルト{ 
        データ（）{ 
            リターン{ 
                btnFlag：偽
            } 
        }、
        マウント（）{ 
            window.addEventListener（ 'スクロール'、この.scrollToTop）
        }、
        破壊（）{ 
            window.removeEventListener（ 'スクロール'、これ。 scrollToTop）
        }、
        メソッド：{ 
            // バック法の上部には画像をクリックして、遷移滑らかにするためにタイマーを追加
            backTop（）{ 
                CONST = この
                タイマーをせsetInterval =（（）=> { 
                    せispeed = Math.floor（-that.scrollTop / 5 ）
                    document.documentElement.scrollTop = document.body.scrollTop + = that.scrollTop ispeed
                     IF（that.scrollTop === 0 ）{ 
                        clearInterval（タイマ）
                    } 
                }、 16 ）
            }、
            
            //は、高さがバック未満60隠さのアイコンよりも大きい場合、上からディスプレイ60の上部の高さを算出する
            scrollToTop（）{ 
                CONST = この
                LET scrollTopスプライト= window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop 
                    that.scrollTop = scrollTopスプライト
                 場合（that.scrollTop> 60 ）{ 
                    that.btnFlag = 真
                } 他{ 
                    that.btnFlag = 偽
                } 
            } 
        } 
    }
 </ SCRIPT>

 

 

　　図:(上部のスクロールバーの効果は、div要素が表示されていない、スクロールバーを下にスライドさせ、DIV示します）