避免切换速度过快显得突兀,在不使用 a 标签以及添加 class类 进行锚点操作时,这时候就可以用到 dom 方法 scrollTo 来实现平滑滚动。
定义
scrollTo(xpos,ypos),包含两个必须属性
xpos(指定滚动到X轴指定位置)
ypos(指定滚动到X轴指定位置)
使用:
// 滚动到指定位置
window.scrollTo(100,500)
scrollTo(options),包含三个必须属性
top (y-coord) 相当于y轴指定位置
left (x-coord) 相当于x轴指定位置
behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto
使用:
// 设置滚动行为改为平滑的滚动
window.scrollTo({
top: 1000,
behavior: "smooth"
});
兼容
适用于pc端和移动端,scrollTo(options)属性不兼容 IE
使用
// vue中使用
// 标题
<div
class="tabs"
v-for="(item, index) in titAll"
:key="index"
:class="{ actives: isactive === index }"
@click="tabsColor(index)"
>
{{ item }}
</div>
// 分类tit
<div>
<div class="item" id="tabs0">资产账户</div>
// <div>分类内容</div>
<div class="item" id="tabs1">信贷服务</div>
// <div>分类内容</div>
<div class="item" id="tabs2">金融服务</div>
// <div>分类内容</div>
</div>
data() {
return {
titAll: ["资产账户", "信贷金融", "经融服务"],
//初始选中
isactive: 0,
};
},
methods: {
tabsColor(index) {
// 切换选中样式
this.isactive = index;
// 获取对应iddom
const tabsId = document.querySelector(`#tabs${index}`);
// 判断进行平滑滚动
if (tabsId) {
window.scrollTo({
top: tabsId.offsetTop,
behavior: "smooth",
});
}
},
},