Vue返回顶部

最新推荐文章于 2024-05-22 16:28:54 发布

木头清柠

最新推荐文章于 2024-05-22 16:28:54 发布

阅读量229

点赞数 3

文章标签： vue.js javascript html

本文链接：https://blog.youkuaiyun.com/m0_55295461/article/details/123403058

版权

本文介绍了如何在Vue项目中实现页面返回顶部的功能。通过在模板中添加点击事件，并在data选项中定义top状态，结合JavaScript和HTML，实现点击按钮时页面平滑滚动到顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在template标签中设置一个点击事件，并且在data函数中定义top状态为隐藏即false

<template>
    <div class="box">
            <div>
                下拉的内容
            </div>
        <!-- 1. 返回顶部 -->
        <div class="top"  v-show="top" @click="istop">
         回到顶部
        </div>
    </div>
</template>
 
<script>
    export default {
        data(){
            return{
                top:false,//控制显隐
            }
        },


        mounted(){
         window.addEventListener("scroll",()=>{// 滚动事件
             let html =document.documentElement 
             if (html.scrollTop>=100) {//当滚动高度大于等于100返回顶部出现
                 this.top=true
             } else {
                 this.top=false
             }
         })
        },



        methods:{//3 加定时器的回顶效果
             istop(){
                //  document.documentElement.scrollTop=0
                 let html =document.documentElement 
                 var timer = setInterval(() => {
                     if (html.scrollTop<=0) {
                         clearInterval(timer)
                     }
                     html.scrollTop=html.scrollTop-20
                 }, 10);
             }
        }
    }
</script>
 
<style lang="scss" scoped>
.box{
    position: relative;
    .top{
        position: fixed;
        right: 20px;
        bottom: 60px;
        padding: 20px;
        background: rgba(0,155,0,.3);
    }
}
</style>