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

一、跳转到指定位置

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

• 数据

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

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

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

分组2：

  {{item.name}}

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

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

 //将数组传过去

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

	
跳转

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

  
 {{item.name}} 

• 然后就是跳转的方法

将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

   
 {{item.name}} 

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

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

三、回到顶部

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

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

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

   

     up
   
 

• 在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组件

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