切换页面滚动条置顶

vue使用的是单页面路由，所以切换页面的时候是不会进行刷新的，这时候就会导致滚动条在切换页面之后不会自动回到顶部。

我们可以使用vue中的router.afterEach这个钩子来解决这一问题

在main.js中新增如下代码就完美解决了

import router from './router'//引入路由

router.afterEach((to,from,next) => {
  window.scrollTo(0,0); //切换路由之后滚动条始终在最顶部
});

点击按钮回到顶部

1.新建一个.vue文件来封装组件，然后再需要此功能的页面通过import进行引入。然后再注册组件，就可以使用了。

<template>
  <div id="connectUsImg" class="img_box" v-show="showIcon" @click="backTop()">
      <img src="../../assets/images/stick.png" />
  </div>
</template>

<script>
export default {
  name: "connectUsImg",
  data() {
    return {
      showIcon: false //隐藏置顶图标
    };
  },
  mounted() {
    window.addEventListener('scroll', this.scrollBackTop); //监听滚动条
  },
  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则隐藏
  scrollBackTop () {
    const that = this;
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    that.scrollTop = scrollTop;
    if (that.scrollTop > 60) {
      that.showIcon = true;
    } else {
      that.showIcon = false;
    }
  }
  }, 
  //移除滚动条监听
  destroyed () {
    window.removeEventListener('scroll', this.scrollBackTop)
  }
};
</script>

<style lang="less" scoped>
.img_box img{
  width:67px;
  height:67px;
  background:#FFD200;
  background:url('../../assets/images/stick.png');
  background-color:#fff;
  background-size:100% 100%;
  position:fixed;
  z-index:98;
  right:60px;
  bottom:164px;
  border-radius:50%;
}
</style>