vue 置頂組件

<template>
    <div id="backtop">
        <img
            src="@/assets/temp/top.png"
            alt="置頂"
            @click="backtop"
            v-show="totop"
            class="backtop"
        />
    </div>
</template>

<script>
export default {
    data() {
        return {
            totop: false
        };
    },
    components: {},

　　　　//監聽滾動事件
　　　　利用VUE寫一個在控制台打印當前的scrollTop。首先，在 mounted 鈎子中給window添加一個滾動滾動監聽事件：

    mounted() {
        console.log(1);
        window.addEventListener("scroll", this.scrolltotop);
    },
　　　//離開該頁面需要移除這個監聽的事件

    destroyed() {
        window.removeEventListener("scroll", this.scrolltotop);
    },
    methods: {

　　　　　　//監聽回到頂部按鈕距瀏覽器頂部的距離，滾動的距離如果大於瀏覽器高度時，設置 toTop 為true,否則就是false

        scrolltotop() {
            let scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            if (scrollTop > 400) {
                this.totop = true;
            } else {
                this.totop = false;
            }
        },
        //回到頂部 點擊回到頂部按鈕，讓距離逐漸減少，形成上划的效果

        backtop() {
            let back = setInterval(() => {
                if (
                    document.body.scrollTop ||
                    document.documentElement.scrollTop
                ) {
                    document.body.scrollTop -= 100;
                    document.documentElement.scrollTop -= 100;
                } else {
                    clearInterval(back);
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.backtop {
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 75px;
    right: 12px;
    z-index: 100;
    opacity: 0.6;
}
</style>

 

<template>
  <a href="javascript:;" class="toTop" @click="backTop" v-show="backToTop">
    <i class="iconfont">&#xe65d;</i>
  </a>
</template>