js实现点击元素页面滚动到指定div的效果

1、使用a标签跳转到锚点。

<div>
   <a href="#div1">div1</a>
   <a href="#div2">div2</a>
   <a href="#div3">div3</a>
   <div id="div1" style="heigth:200px">这里是div1</div>
   <div id="div2" style="heigth:200px">这里是div2</div>
   <div id="div3" style="heigth:200px">这里是div3</div>
</div>

2、使用Window.scrollTo()
用法
window.scrollTo(x-coord,y-coord )
window.scrollTo(options)
参数说明
x-coord 是文档中的横轴坐标。
y-coord 是文档中的纵轴坐标。
options 是一个包含三个属性的对象:
top 等同于 y-coord
left 等同于 x-coord
behavior 类型String,表示滚动行为,参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto

代码（proxy.$nextTick 是vue3中的写法）

<div>
   <p onClick="onScroll()">div1</p>
   <p onClick="onScroll()">div2</p>
   <p onClick="onScroll()">div3</p>
   <div id="div1" style="heigth:200px">这里是div1</div>
   <div id="div2" style="heigth:200px">这里是div2</div>
   <div id="div3" style="heigth:200px">这里是div3</div>
</div>
<script>
var onScroll=function(){
	var el = document.getElementById(`label${num}`)
 	if (!el) {
 		return
 	}
 	window.scrollTo({ 'behavior': 'smooth', 'top': el.offsetTop })
}
</script>

在vue中也一样，只需要注意一下DOM加载完成后，有钩子this.$nextTick。

<!--点击标签-->
<p v-for="(word,index) in wordsArr"
   :key="index"
    @click="selectQuestion(word.value)">{{word.label}}
 </p>
 <!--锚点的div-->
<div v-for="(word,index) in wordsArr"
   :key="index"
   :id="'label'+word.id"
    @click="selectQuestion(word.value)">{{word.label}}
 </div>
<script>        
 const selectQuestion = (id) => {
      var el = document.getElementById(`label${id}`)
      if (!el) {
        return
      }
      this.$nextTick(function () {
        window.scrollTo({ 'behavior': 'smooth', 'top': offsetTop })
      })
    }
</script>