Vue点击上下滑动滚屏实践

<div class="totop">
      <a @click="backTop()" size="50" v-show="tabshow" class="btn btn-default"
        ><span class="fa"></span
      ></a>
    </div>

data() {

    return {

      scrollTopNum: "", //页面滚动的高度

      tabshow: false, //是否进行某种操作

    };

  },

  mounted() {

    window.addEventListener("scroll", this.handleScroll, true);

  },

  methods: {

    handleScroll() {

      let top =

        document.documentElement.scrollTop ||

        document.body.scrollTop ||

        window.pageYOffset;

      this.scrollTopNum = top;

    },

    backTop() {

      const goToTop = () => window.scrollTo(0, 0);

      goToTop();

    },

  },

//监听距离头部多少显示按钮

  watch: {

    scrollTopNum: function () {

      if (this.scrollTopNum > 50) {

        this.tabshow = true;

      } else {

        this.tabshow = false;

      }

    },

  },

<div class="tobuttom"></div>
            <a @click="backButtom()" href="#" rel="external nofollow"  class="wangxia">
              <span class="xiabai"></span>
            </a>

data() {

    return {

      scrollButtomNum: "", //页面滚动的高度

    };

  },

  methods: {

    handleScroll() {

      let Buttom =

        document.documentElement.scrollButtom ||

        document.body.scrollButtom ||

        window.pageYOffset;

      this.scrollButtomNum = Buttom;

    },

    backButtom() {

      const goToButtom = () => window.scrollTo(0, 3380);//滚动到页面的位置3380



      goToButtom();

    },

  },

  mounted() {

    window.addEventListener("scroll", this.handleScroll, true);

  },