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

ゞ浴缸里的玫瑰 2023-01-20 06:55 276阅读 0赞

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 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>