返回顶部按钮功能实现

ps：一开始不太会用掘金的代码块功能不知道怎么把这个vue代码格式化都堆在一了。感谢膜法小编提出的建议！！！

我在写自己的博客系统时刚好想到了这个需求

诶！这个自己给自己提需求可还行。嘿嘿

由于博客系统是基于 vue.js 框架开发所以呢我就基于 vue.js 框架写了个组件。

代码如下：

index.vue

<template>
  <item v-if="isScrollTop" @click="scrollToTop"/>
</template>

<script>
import item from './item'
export default {
  name: 'ScrollTop',
  data () {
    return {
      // 定义滚动条默认位置
      scrollTop: null,

      // 定义按钮默认状态
      isScrollTop: false
    }
  },
  components: {
    item
  },
  props: {
    // 需要监听位置的 dom 元素
    el: String
  },
  mounted () {
    this.listenScroll(100)
  },
  methods: {
    /**
     * 滚动到顶部
     */
    scrollToTop () {
      let $this = this

      // 返回顶部动画特效
      setTimeout(function animation () {
        if ($this.scrollTop > 0) {
          setTimeout(() => {
            let size = 10
            // 步进速度
            $this.scrollTop = $this.scrollTop - size

            // 返回顶部
            if (document.documentElement.scrollTop > 0) {
              document.documentElement.scrollTop = $this.scrollTop - size
            } else if (window.pageYOffset > 0) {
              window.pageYOffset = $this.scrollTop - size
            } else if (document.body.scrollTop > 0) {
              document.body.scrollTop = $this.scrollTop - size
            } else if (document.querySelector($this.el).scrollTop) {
              document.querySelector($this.el).scrollTop =
                $this.scrollTop - size
            }

            animation()
          }, 1)
        }
      }, 1)
    },
    /**
     * 监听滚动事件
     * @param position 返回顶部按钮出现的位置
     */
    listenScroll (position) {
      window.addEventListener(
        'scroll',
        () => {
          this.scrollTop =
            document.documentElement.scrollTop ||
            window.pageYOffset ||
            document.body.scrollTop ||
            document.querySelector(this.el).scrollTop

          // 控制滚动按钮的隐藏或显示
          if (this.scrollTop > position) {
            this.isScrollTop = true
          } else {
            this.isScrollTop = false
          }
        },
        true
      )
    }
  }
}
</script>
复制代码

item.vue

<template>
  <p @click="$emit('click')" class="toTop">
    <br>返
    <br>回
    <br>顶
    <br>部
    <br>
  </p>
</template>
<style scoped>
.toTop{
/* 各位看官可以在此处添加你们的返回顶部按钮风格 */
}
</style>
复制代码

欢迎到我的博客、我的github逛哦！

我的博客：http://blog.luyu.fun

我的github：https://github.com/panyu97py/

转载于:https://juejin.im/post/5c692bd16fb9a049ff4eab13