<div class="main-content" id="scrollBox"><!--tab-title-fixed fix在顶部的时候加上-->
<div class="face_nav">
<div class="nav_menus" :class="fixTop ? 'fix' : ''">
<ul class="nav_menu">
<li v-for="(item, index) in menuList" :key="item.name"
:class="{'menu_l': true, 'active': index === activeMenu}"
@click="jumpTo(index)">{{item.title}}</li>
</ul>
<div class="op-btn">
<a href="javascript:void(0);" @click="changeView('bmsBuy')">
<span class="buy-new">立即选购</span>
</a>
</div>
</div>
</div>
<div class="item-section mod-guide" menu="coreValue" title="业务价值"></div>
<div class="item-section customer-case" menu="applicationScene"
title="应用场景"></div>
<div class="item-section" menu="functionalService" data-responsive="show"
title="功能与服务"> </div>
<div class="item-section mod-scenario J-tabBoxWrapper"
menu="productSpecification"
title="规格说明"> </div>
<div class="item-section mod-price" menu="price"
title="产品定价"> </div>
<div class="item-section mod-price" menu="customers" title="客户案例"></div>
</div>
export default {
data() {
return {
activeMenu: 0,
scrollBox: '',
jumpFlag: false,
fixTop: false
}
},
mounted() {
this.scrollBox = document.getElementById('scrollBox')
window.addEventListener('scroll', ()=> {
let scrollTop =
document.documentElement.scrollTop ||
document.body.scrollTop ||
window.pageYOffset
if (scrollTop > this.scrollBox.offsetTop) {
this.fixTop = true
} else {
this.fixTop = false
}
if (!this.jumpFlag) {
let jumpDom = document.querySelectorAll('.item-section')
jumpDom.forEach((item, index) => {
if (item.offsetTop <= scrollTop) {
this.activeMenu = index
}
})
}
})
},
methods: {
jumpTo(index) {
this.jumpFlag = true
this.activeMenu = index
let jumpDom = document.querySelectorAll('.item-section')[index]
let scrollTop = jumpDom.offsetTop // 获取需要滚动的距离
window.scrollTo({
top: scrollTop,
behavior: 'smooth' // 平滑滚动
})
setTimeout(() => {
this.jumpFlag = false
}, 5000)
}
}
}
另vue实现锚点跳转之scrollIntoView()方法
滚动到某个特定元素 ：scrollIntoView()；这个方法不用获取距页面顶部的高度，啥都不用，有id或者class就行啦，几乎可以满足你锚点跳转的所有需求，对齐方式，以及平滑滚动了
这里是v-for循环出来需要点击跳转到对应div的事件
<p> v-for="(value,index) in data" @click="scrollToPosition(index)">{{...}}</p>
这就是你点击scrollToPosition事件需要滚动对应的div
<div> v-for="(value,index) in data" class="roll">{{...}}</div>
js部分
methods:{
scrollToPosition(index){
document.getElementsByClassName('roll')[index].scrollIntoView()
}
这样就利用scrollIntoView()简单实现了一个锚点跳转,下边来看一个scrollIntoView中的一些属性
scrollIntoView(true)相等于scrollIntoView();元素的顶端将和其所在滚动区的可视区域的顶端对齐
为true时相应的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。
这是这个参数的默认值。
scrollIntoView(false)元素的底端将和其所在滚动区的可视区域的底端对齐
为false时相应的scrollIntoViewOptions: {block: “end”, inline: “nearest”}。
同时他的参数也可以是一个object对象
scrollIntoView({
behavior：auto //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block：start//定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之 一。
默认为 "start"。
inline:nearest//"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
})
其中smooth是平滑滚动 start和end是目标滚动到的位置
注意：兼容性的问题多数主流浏览器已经支持其基本功能，也就是说，使用true，false两个参数，来实现木讷的定位（没有滚动动画）是没有任何问题的，但是传入object参数时，就不得不说一句，IE各种版本会直接忽略，全部看成true参数属性，如果想看到滚动动画，就只有火狐和chrome
