回到顶部

<template>

  <div id="app">

    <div id="ds-nav">

      <Header />

    </div>

    <router-view />

 

    <!-- 回到顶部 -->

    <div

      class="scrollTop"

      style="right: 40px; bottom: 40px"

      v-show="isShowScrollTop && this.$route.path !== '/exploreView'"

      @click="handleClickToTop"

    >

      <i class="el-icon-caret-top"></i>

    </div>

  </div>

</template>

<script>

import Header from "@/components/Header.vue";

export default {

  name: "app",

  components: {

    Header,

  },

  data() {

    return {

      isShowScrollTop: false,

    };

  },

  mounted() {

    // 监听滚动事件

    window.addEventListener("scroll", this.handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理

  },

  methods: {

    handleClickToTop() {

      var anchor = document.querySelector("#app");

      anchor.scrollIntoView({ block: "start", behavior: "smooth" });

    },

    //滚动监听

    handleScroll() {

      let scrollTop =

        window.pageYOffset ||

        document.documentElement.scrollTop ||

        document.body.scrollTop; // 滚动条偏移量

      this.isShowScrollTop = scrollTop > 400 ? true : false;

    },

  },

  destroyed() {

    window.removeEventListener("scroll", this.handleScroll);

  },

};

</script>

 

<style lang="scss">

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

#ds-nav {

  font-size: 16px;

  line-height: 20px;

  overflow: hidden;

  position: fixed;

  top: 0;

  z-index: 999;

  width: 100%;

  background: #fff;

}

</style>