vue中实现回到顶部功能

sunlizhen

于 2020-11-18 10:45:07 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/sunlizhen/article/details/109766618

这篇博客介绍了如何在 Vue.js 应用中实现回到顶部的功能。通过监听滚动事件，当页面滚动超过一定距离时显示回顶按钮，点击按钮则平滑滚动回页面顶部。代码中使用了 Vue 的数据绑定和组件结构，结合 JavaScript 的定时器实现平滑滚动效果。

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

<template>
  <div class="home">
    <span type="text"  v-if="btnFlag" class="FloatWin_l FloatWin_p" @click="backTop">返回顶部</span>
  </div>
</template>

<script>
  import generalView from './component/generalView'
  import historySub from './component/historySub'
  export default {
    name: "healthy",
    components:{ generalView, historySub },
    data(){
      return{
        btnFlag: false,
      }
    },
    methods: {
      // 点击图片回到顶部方法，加计时器是为了过渡顺滑
      backTop() {
        const that = this
        let timer = setInterval(() => {
          let ispeed = Math.floor(-that.scrollTop / 5)
          document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
          if (that.scrollTop === 0) {
            clearInterval(timer)
          }
        }, 16)
      },
      // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
      scrollToTop() {
        const that = this
        let scr