vue点击跳转顶部和底部

有的页面比较冗长，动态加载多页的时候想返回顶部，在顶部的时候想返回底部。

项目使用的是vue+vant，这里只做简单的演示。

最简单的就是使用 a 标签进行跳转，获取到页面加载的最后一个dom元素节点，然后使用 a 标签的herf属性进行跳转

废话少说上代码

	<div id="toBottom">
      点击加载更多
    </div>
    <!-- 点击跳转top和bottom -->
    <div v-show="showGo">
      <a :href="goHerfs ? '#' : '#toBottom'" class="right-go" @click="clickGo">
        <p v-if="!goHerfs">goTop<van-icon name="arrow-up" /></p>
        <p v-else>goBottom<van-icon name="arrow-down" /></p>
      </a>
    </div>

//在data里定义
bottomHide: "", // 底部高度
goHerfs: true, // 判断跳转目标

//在mounted绑定页面滚动事件
mounted() {
    
    
    window.addEventListener("scroll", this.scrollHandle); 
  },

  // 在methods里写2个方法，监听页面高度
    methods: {
    
    
    scrollHandle(e) {
    
    
      // 屏幕可用工作区高度
      let height = window.screen.availHeight;
      this.bottomHide = e.srcElement.scrollingElement.scrollTop; // 获取页面滚动高度
      // 向下滑动自动变为返回顶部样式
      if (this.bottomHide > 1) {
    
    
        this.goHerfs = false;
      }
      console.log(this.bottomHide, height);
    },
     // 点击事件
    clickGo() {
    
    
      this.goHerfs = !this.goHerfs;
    },
   }

//css部分
 .right-go {
    
    
    position: fixed;
    right: 0px;
    bottom: 35px;
    font-size: 25px;
    color: rgb(250, 29, 14);
  }

• 使用a标签跳转是有弊端的，项目需求可能需要更改路由部分。也可以使用其它方法实现