详解Vue回到顶部

Vue回到顶部是一个非常常见的需求，一般来说，我们需要满足以下几个要求：1）实现一个线性的回到顶部的过程，2）点击按钮能够快速回到顶部，3）滚动到一定高度后才显示回到顶部按钮。

一、基础实现

首先，我们需要实现一个基础的回到顶部功能，不考虑按钮显示和逐步滑动效果。

// template

<template>
  <div class="scroll-wrap" @scroll="scroll">
    <div class="scroll-content">
      <div class="content">  // 省略其他内容
        // 点击回到顶部的按钮
        <div class="back-to-top" @click="backToTop">Top</div>
      </div>
    </div>
  </div>
</template>

// script

<script>
export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  mounted() {
    this.$refs.scrollWrap.addEventListener('scroll', this.scroll);
  },
  methods: {
    backToTop() {
      this.$refs.scrollWrap.scrollTop = 0;
    },
    scroll() {
      this.scrollTop = this.$refs.scrollWrap.scrollTop;
    }
  }
};
</script>

// style

<style>
.scroll-wrap {
  height: 300px;
  overflow-y: scroll;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333333;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.back-to-top.show {
  opacity: 1;
}
</style>

在这个实现中，我们在mounted中监听scroll事件，设置scrollTop的值，实现了一个基本的滚动效果。点击back-to-top按钮时，设置scrollTop为0，即可实现基本的回到顶部效果。

二、逐步回到顶部

为了让用户可以更加自然地回到顶部，我们可以添加逐步回到顶部效果。

// template（与上面相同）

// script

<script>
export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  mounted() {
    this.$refs.scrollWrap.addEventListener('scroll', this.scroll);
  },
  methods: {
    backToTop() {
      let currentScrollTop = this.$refs.scrollWrap.scrollTop;
      let step = currentScrollTop / 20;  // 分为20步
      let countDown = setInterval(() => {
        if (this.$refs.scrollWrap.scrollTop <= 0) {
          clearInterval(countDown);
        } else {
          this.$refs.scrollWrap.scrollTop -= step;
        }
      }, 10);
    },
    scroll() {
      this.scrollTop = this.$refs.scrollWrap.scrollTop;
    }
  }
};
</script>

// style（与上面相同）

在这个实现中，我们添加了逐步回到顶部效果。通过分为20步，每一步设置scrollTop值减少1/20，实现了一个平滑逐步回到顶部的效果。

三、显示/隐藏按钮

为了让用户更加方便地使用回到顶部功能，我们可以在滚动高度超过一定值时，显示回到顶部按钮。

// template（与上面相同）

// script

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      showButton: false,
    };
  },
  mounted() {
    this.$refs.scrollWrap.addEventListener('scroll', this.scroll);
  },
  methods: {
    backToTop() {
      let currentScrollTop = this.$refs.scrollWrap.scrollTop;
      let step = currentScrollTop / 20;  // 分为20步
      let countDown = setInterval(() => {
        if (this.$refs.scrollWrap.scrollTop  100) {
        this.showButton = true;
      } else {
        this.showButton = false;
      }
    }
  }
};
</script>

// style

<style>
.scroll-wrap {
  height: 300px;
  overflow-y: scroll;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333333;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.back-to-top.show {
  opacity: 1;
}
</style>

在这个实现中，我们添加了一个showButton属性，当滚动高度超过100时，将showButton设为true，使得back-to-top按钮的class加上show类，从而显示出来。当滚动高度小于等于100时，将showButton设为false，使得back-to-top按钮的class去掉show类，从而隐藏起来。

四、动态判断按钮位置

为了让回到顶部按钮可以根据页面布局自动调整位置，我们需要实现动态判断按钮的位置。

// template

<template>
  <div class="scroll-wrap" @scroll="scroll">
    <div class="scroll-content">
      <div class="content">
        // 点击回到顶部的按钮
        <div class="back-to-top" :class="{show: showButton}" @click="backToTop">Top</div>
      </div>
    </div>
    <div class="sidebar">
      // 省略其他内容
      <div class="sidebar-back-to-top" :class="{show: showButton}" @click="backToTop">Top</div>
    </div>
  </div>
</template>

// script

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      showButton: false,
      sidebarTop: 0,
      sidebarHeight: 0,
    };
  },
  mounted() {
    this.$refs.scrollWrap.addEventListener('scroll', this.scroll);
    // 获取侧边栏的位置信息
    this.sidebarTop = this.$refs.sidebar.offsetTop;
    this.sidebarHeight = this.$refs.sidebar.offsetHeight;
  },
  methods: {
    backToTop() {
      let currentScrollTop = this.$refs.scrollWrap.scrollTop;
      let step = currentScrollTop / 20;  // 分为20步
      let countDown = setInterval(() => {
        if (this.$refs.scrollWrap.scrollTop  100 && this.scrollTop + window.innerHeight < this.sidebarTop + this.sidebarHeight) {
        this.showButton = true;
      } else {
        this.showButton = false;
      }
    }
  }
};
</script>

// style

<style>
.scroll-wrap {
  display: flex;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333333;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.back-to-top.show {
  opacity: 1;
}

/* 侧边栏样式 */
.sidebar {
  width: 20%;
  background-color: #f5f5f5;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
}

.sidebar-back-to-top {
  background-color: #333333;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.sidebar-back-to-top.show {
  opacity: 1;
}
</style>

在这个实现中，我们首先新增了一个sidebar侧边栏，将back-to-top按钮也添加到了侧边栏中，作为一个备选方案（如果页面布局看不到back-to-top按钮，用户可以通过侧边栏的back-to-top按钮进行操作）。然后，我们在mounted中获取侧边栏的位置信息（top和height），在scroll回调中，判断scrollTop+窗口高度是否小于sidebar的底部位置，从而确定back-to-top按钮是否可以显示。

五、总结

至此，我们对Vue回到顶部进行了详细的阐述。在实现过程中，我们需要注意以下几点：

1、基本实现：监听scroll事件，动态设置scrollTop的值，然后点击back-to-top按钮时将scrollTop设为0即可。

2、逐步回到顶部：分为20步，每一步设置scrollTop值减少1/20，实现平滑逐步回到顶部的效果。

3、显示/隐藏按钮：当scrollTop>100时，显示back-to-top按钮；否则，隐藏back-to-top按钮。

4、动态判断按钮位置：当scrollTop+窗口高度小于sidebar的底部位置时，显示back-to-top按钮，并将back-to-top按钮放置在侧边栏中，作为备选方案。

以上实现仅供参考，实际功能还需要根据具体业务情况进行调整。