这篇文章主要介绍了关于使用c+v让vue返回顶部组件vue.js实现返回顶部，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

  <pre class="brush:php;toolbar:false">

<p class="back-to-ceiling" @click="backToTop" v-show="visible" :style="customStyle">
  

export default {
name: 'BackToTop',
props: {

// 指定达到多少距离显示返回顶部按钮
visibilityHeight: {
  type: Number,
  default: 400
},
// 距离顶部的距离
backPosition: {
  type: Number,
  default: 0
},
customStyle: {
  type: Object,
  default: function() {
    return {
      right: '50px',
      bottom: '50px',
      width: '40px',
      height: '40px',
      'border-radius': '4px',
      'line-height': '45px',
      background: '#e7eaf1'
    }
  }
},
// 过渡动画名称
transitionName: {
  type: String,
  default: 'fade'
}

},
data() {

return {
  visible: false,
  interval: null
}

},
mounted() {

window.addEventListener('scroll', this.handleScroll)

},
beforeDestroy() {

window.removeEventListener('scroll', this.handleScroll)
if (this.interval) {
  clearInterval(this.interval)
}

},
methods: {

handleScroll() {
  this.visible = window.pageYOffset > this.visibilityHeight
},
backToTop() {
  const start = window.pageYOffset
  let i = 0
  this.interval = setInterval(() => {
    const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
    if (next