vue锚点跳转到对应位置(精确定位)
安装:npm install --save vue-scrolltomain.js引入import Vue from 'vue'var VueScrollTo = require('vue-scrollto');Vue.use(VueScrollTo)页面引用:<template><div class="scrollDemo"><div class="demoNav
·
安装:
npm install --save vue-scrollto
main.js引入
import Vue from 'vue'
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)
页面引用:
<template>
<div class="scrollDemo">
<div class="demoNav flex-center-center">
<div
class="demoNavItem"
v-for="(item,index) in demoNavItem"
:key="index"
:class="{navActive : idx==index}"
@click="changNav(index)"
>{{item}}</div>
</div>
<div class="demoContent">
<!-- 如果内容为循环,id则定义为:id="'demoItem'+index" -->
<div class="demoItem0 demoItem" id="demoItem0">谷歌浏览器内容</div>
<div class="demoItem1 demoItem" id="demoItem1">uc浏览器内容</div>
<div class="demoItem2 demoItem" id="demoItem2">IE浏览器内容</div>
<div class="demoItem3 demoItem" id="demoItem3">火狐浏览器内容</div>
<div class="demoItem4 demoItem" id="demoItem4">360浏览器内容</div>
<div class="demoItem5 demoItem" id="demoItem5">猎豹浏览器内容</div>
</div>
</div>
</template>
<script>
// 引入
var VueScrollTo = require("vue-scrollto");
export default {
data() {
return {
idx: 0,
demoNavItem: [
"谷歌浏览器",
"uc浏览器",
"IE浏览器",
"火狐浏览器",
"360浏览器",
"猎豹浏览器",
],
};
},
methods: {
// 导航选中效果
changNav(index) {
this.idx = index;
VueScrollTo.scrollTo(document.getElementById("demoItem" + index), 1000, {
offset: -50,
});
},
},
};
</script>
<style scoped>
.flex-center-center {
display: flex;
align-items: center;
justify-content: center;
}
.demoNav {
width: 100%;
height: 70px;
background: rgba(0, 31, 144, 1);
position: sticky;
left: 0;
top: 0;
}
.demoNavItem {
font-size: 40px;
color: #fff;
margin-left: 30px;
cursor: pointer;
}
.navActive {
color: red;
}
.demoItem {
width: 100%;
height: 600px;
font-size: 60px;
color: #fff;
text-align: center;
padding: 60px 0 0 0;
}
.demoItem0{
background: gold;
}
.demoItem1 {
background: red;
}
.demoItem2 {
background: chartreuse;
}
.demoItem3 {
background: cornflowerblue;
}
.demoItem4 {
background: cyan;
}
.demoItem5 {
background: darkmagenta;
}
</style>
效果图:
更多推荐
已为社区贡献15条内容
所有评论(0)