锚点定位
// 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",
});
}
},
},
置顶
<!-- 回到顶部 -->
<div class="go-top" @click="toYpWebsite()">
<img src="@/assets/index/top.png" alt="">
置顶
</div>
//置顶
toYpWebsite() {
// this.$router.push('/ypWebsite')
document.body.scrollTop = document.documentElement.scrollTop = 0
},