scrollTo與scrollTop及其區別

window.scrollTo(x,y)

缺：只能作用於window，不可作用於某一指定元素

優：可以作用於x軸和y軸兩個方向

注：scrollTo在安卓手機上存在兼容性問題

document.documentElement.scrollTop = 0

缺：只能作用於y軸的方向

優：可以作用於某一指定元素，如document.getElementById('demo').scrollTop=666

注：作用某一指定元素時，生效的前提條件是：該指定元素的父盒子高度小於其高度

document.body.scrollTop = 0

注：一般情況下，一個瀏覽器中document.documentElement.scrollTop和document.body.scrollTop屬性同時只會有一個生效，另一個值恆為0且不可被更改

示例：封裝一個回到頂部組件（基於vue語法）

<template>
    <div class="container">
        <div class="goTop" @click="goTop" v-show="goTopShow"><span class="iconfont iconjiantou4"></span></div>
    </div>
</template>

<script>
export default {
    name: "GoTop",
    data(){
        return{
            goTopShow: false,  //回到頂部按鈕是否顯示
        }
    },
    mounted(){
         window.addEventListener("scroll",this.scrollCount,true)
    },
    methods:{
        //檢測滾動高度
        scrollCount(){
            let topcount=document.documentElement.scrollTop||document.body.scrollTop
            if(topcount>400&&!this.goTopShow){
                this.goTopShow=true
            }else if(topcount<=400&&this.goTopShow){
                this.goTopShow=false
            }
        },
        //回到頂部
        goTop(){
            if(document.documentElement.scrollTop){
                document.documentElement.scrollTop=0
            }else{
                document.body.scrollTop=0
            }
        },
    }
}
</script>


<style scoped lang="less">
    .container{
        .goTop{
            width:50px;
            height:50px;
            color:#fff;
            border-radius: 50%;
            bottom: 50px;
            right: 10px;
            background-color: rgba(91,119,254,.8);
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            .iconfont{
                font-size: 20px;
            }
        }
    }
</style>