vue(js)监听元素滚动，并实现点击返回顶部效果

if时光重来

已于 2023-02-24 11:48:23 修改

阅读量394

点赞数

分类专栏： vue js 文章标签： javascript vue.js 前端

于 2023-02-24 11:42:49 首次发布

本文链接：https://blog.csdn.net/admin_web/article/details/129197735

版权

js 同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

vue

31 篇文章 0 订阅

订阅专栏

<template>
	<div>
		<el-main id="el-main">正文部分...</el-main>
		<!-- 点击回到顶部按钮 -->
	    <div class="scrollTop" @click="clickBackTop" v-show="scrollTopCount > 50"><i class="el-icon-top"></i></div>
    </div>
</template>
<script>
export default {
	data() {
		return {
			scrollTopCount: 0, // 监听#el-main滚动距离顶部的高度
		}
	},
	methods: {
		// 点击回到顶部
        clickBackTop(){
            const box = document.getElementById('el-main')
            var timer = '';
            timer = setInterval(() => {
                this.scrollTopCount = Math.floor(this.scrollTopCount / 20);
                box.scrollTop=this.scrollTopCount;
                if(this.scrollTopCount == 0){
                    clearInterval(timer);
                }
            }, 100);
            
        }
	},
	mounted() {
		// 监听元素滚动
        var that = this;
         const box = document.getElementById('el-main')
         box.addEventListener('scroll', (e => {
             var scrollTop = e.target.scrollTop;
             that.scrollTopCount = scrollTop;
         }))
	}
}
</script>
<style>
.scrollTop{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        border: 1px solid #ddd;
        background: #ccc;
        position: fixed;
        right: 30px;
        bottom: 100px;
    }

</style>