锚点定位 跳转到指定位置 回到顶部功能

一、跳转到指定位置

项目中数据较多，但是要在一个页面展示出来，就会需要定位功能。
例如淘宝中点击某个商品的分类会跳转到对应的模块，模块中是详细的商品信息

• 数据

arrayList:[{       //不一一列出来了
	 name:'1',
	  value:'one',
	  active:false
	},{
	  name:'2',
	  value:'two',
	  active:false
}]	

• 由于数据过多，为了用户体验，将要展示的数据进行了分组。

然后分组循环，将name展示为标签，然后点击标签会跳转定位到指定位置。

<span>分组2：</span>
<div>
  <a   href="javascript:;"
       v-for="(item,index) in arrayList.slice(11,16)"   //将要展示的数据进行了分组，然后分组循环
       :key="index"
       :class="item.active?'active':''"   //点击了的标签给一个class区分开，标签加边框，高亮
       @click="jumpTo(item.value,index+11)   //跳转的方法
    ">{{item.name}}</a>
</div>

• 由于有的数据不止要展示，还要进行配置管理，会使用到组件。

我这里第1个数据是使用组件展示的，获取dom的时候用this.$refs[value].$el
this.$el是在mounted中才会出现的。$el
它指的是当前组件的的元素

<JumpTo ref="one" :arrayList="arrayList"/> //将数组传过去

第2条数据是直接展示的，获取dom的时候用this.$refs[value].

<div ref='box'>
	<h3>跳转</h3>
</div>

之后的数据都是直接循环数组的

<div ref="numberDetail"
    v-show="index>3"
     v-for="(item,index) in arrayList"
     :key="index+4">
  <h3 :class="item.active?'titleActive':''"> {{item.name}} </h3>
</div>

• 然后就是跳转的方法

将value和index传过来，组件分开进行处理

jumpTo(value,index){
   let el = index >3? this.$refs['numberDetail'][index]:(index == 0 ? this.$refs[value].$el:this.$refs[value]);//根据ref获取dom
   this.arrayList.forEach((item,index)=>{
     item.active = false
   })
   this.arrayList[index].active = true;//将点击的标签样式区分开
   document.querySelector('.app-main').scrollTop =el.offsetTop-229;//计算出scrollTop即可，跳转到指定位置
 },

二、记住位置，返回时跳转

• 获取scrollTop

<div ref="numberDetail"
       v-show="index>3"
       v-for="(item,index) in arrayList"
       :key="index+4">
   <h3 :class="item.active?'titleActive':''"> {{item.name}} </h3>
</div>

• 获取滚动位置是用 scrollTop

jumpTo(value,index){
   let el  =  this.$refs['numberDetail'][index]:
    // let el  =  this.$refs[value].$el
    // let el =   this.$refs[value]);
    document.querySelector('.app-main').scrollTop =el.offsetTop-109;//定位到指定位置
    this.scroll = el.offsetTop;//储存当前scroll的值
},

• 使用 keep-alive （<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。）
• 每次返回页面会调用 activated 生命周期方法

activated() {
	this.$refs.wrapper.scrollTop = this.scroll; //设置scrollTop
}

三、回到顶部

element有回到顶部的组件Backtop
回到顶部
https://element.eleme.cn/#/zh-CN/component/backtop
使用时如下

<template>
  Scroll down to see the bottom-right button.
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

但有时候不符合需求，需要改动

• 可以自己设置按钮的样式以及位置

<div class="el-backtop" style="right: 40px; bottom: 100px;" v-show="visible" @click="backToTop">
   <div style="width: 100%; background-color: rgb(242, 245, 246); box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 6px; text-align: center; line-height: 40px; color: rgb(25, 137, 250);">
     up
   </div>
 </div>

• 在mounted中监听滚动事件

mounted() {
      window.addEventListener('scroll', this.handleScroll,true)
    }

• 在方法中添加回到顶部功能

backToTop() {
        if (this.isMoving) return
        const start = document.querySelector('.app-main').scrollTop
        let i = 0
        this.isMoving = true
        this.interval = setInterval(() => {
          const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
          if (next <= this.backPosition) {
            document.querySelector('.app-main').scrollTop=this.backPosition
            clearInterval(this.interval)
            this.isMoving = false
          } else {
            document.querySelector('.app-main').scrollTop=0
          }
          i++
        }, 16.7)
      },

• 使用改好的backtotop组件

<back-to-top :visibility-height='20' :back-position="0" transition-name="fade"/>

最后，我的资源里有backtotop组件
backToTop
https://download.csdn.net/download/weixin_43043994/11418813