微语:代码适合中午敲,早晚出BUG
点击元素让其滚动到锚点定位scrollIntoView方法 Vue
示例:
点击右侧的字母,滚动到具体的位置,先给右侧的标题绑定点击事件,拿到点击的元素,在通过scrollIntoView方法进行滚动
{ behavior: "smooth" }是平滑滚动属性
<div class="aside">
<ul>
<li @click="clickAZ(item)" v-for="(index, item) in abclist.list" :key="item">{{ item }}</li>
</ul>
</div>
<div class="bscroll">
<ul class="index">
<li v-for="(index, item) in abclist.list" :key="item">
<h2 :id="item">{{ item }}</h2>
<div class="span">
<span :class="{ 'active': datalist.cityname == item }" @click="span(item)" v-for="(item, v) in index"
:key="v">
{{ item }}</span>
</div>
</li>
</ul>
</div>
JS
let clickAZ = (key) => {
console.log(key);
let element = document.getElementById(key);
element.scrollIntoView({ behavior: "smooth" });
}
CSS
body,html{
height: 100%;
}
.bscroll {
height: 100%;
overflow: scroll;
}
.index{
height: 100%;
}