Because this component is a business component, it is encapsulated into
components –>content –>Create a backTop –>Create a BackTop.vue

<template>
<div class="back-top">
  <img src="~assets/img/common/top.png" alt="">
</div>
</template>

<script>
export default {
  name: 'BackTop'
};
</script>

<style scoped>
.back-top {
  position: fixed;
  right: 8px;
  bottom: 50px;
}

.back-top img {
  width: 50px;
  height: 50px;
}
</style>

Import the component to Home In vue, register and reference (reference under better scroll, because it does not scroll with better scroll)
Function: click to return to the top
To meet this requirement, you must first listen for clicks. It's not good to listen for clicks in the component "backtop", because we listen for clicks in the scrolling area. The scrolling area returns to the top, which means we need to get the better scroll object.

That is, a click event occurs in the backTop component, and the code in the scroll must be operated.
Therefore, we directly monitor the click of the backup component, so we do not need to monitor the click inside the component before sending the event.
But can components directly listen to click events?
Components cannot directly listen to clicks. If we want to listen to component clicks, we need to do one thing. We must add the. native modifier

 <back-top  @click.native="backClick"></back-top>

When is the. native modifier used?
When we need to listen to a component's native event, we must add the. native modifier to the corresponding event to listen.

Next: add ref="scroll" attribute to the scroll tag

  backClick(){
      this.$refs.scroll.scrollTo(0,0,500)
    },

It calls the scrollTo method of the scroll component

 methods: {
    scrollTo(x, y, time=300) {
      this.scroll.scrollTo(x, y, time)
    },

The effect is as follows:

Show and hide:
The Back to Top button is displayed when it reaches the critical value, and hidden when it is less than the critical value. So we must monitor scrolling in real time
In the scroll component:

props: {
    //probe detection, 0 and 1 do not detect real-time position
    //2: Detect during finger rolling, but not during inertial rolling after finger leaving
    //3: As long as it is rolling, it will be detected
    probeType: {
      type: Number,
      default: 0
    },
   }

mounted() {
    // 1. Create a BScroll object
    //Through document QuerySelector ('wrapper ') is not particularly good for getting wrappers, because if there are other tags to set wrappers, we don't know which one to get through this
    this.scroll = new BScroll(this.$refs.wrapper, {
      //This click is a boolean type. The default value is false. The function is: better scroll will block the browser's native click event by default.
      //You can control whether elements like div can be clicked
      click: true,
      probeType: this.probeType,
      pullUpLoad: this.pullUpLoad
    })
    // 2. Monitor the rolling position
    this.scroll.on('scroll', (position) => {
      // console.log(position);
      this.$emit('scroll', position)
    })

In our Home component

 <scroll class="content"
              ref="scroll"
              :probe-type="3">

In our scroll component, the following code sends the location information, and we will receive it in the home component

 this.$emit('scroll', position)

receive:

 <scroll class="content" ref="scroll" :probe-type="3"  @scroll="contentScroll" @scroll="contentScroll">

Then process the contentScroll method:

 contentScroll(position){
      // console.log(position);
      this.isShowBackTop = (-position.y)>1000
      this.isTabFixed= (-position.y)>this.tabOffsetTop
    },

among

 this.isShowBackTop = (-position.y)>1000

This sentence means to judge whether the position is greater than 1000. If it is greater than 1000, it will be displayed, otherwise it will be hidden. Display and hiding are also in our backTop component, so give the backtop component a v-show attribute

<back-top  @click.native="backClick" v-show="isShowBackTop"></back-top>

Of course, before this, we need to give it a default attribute in data

 isShowBackTop:false,

The effect is as follows: