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>