vue中实现回到顶部功能

最新推荐文章于 2023-09-04 10:22:10 发布

原创

最新推荐文章于 2023-09-04 10:22:10 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

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

<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