vue+element-ui监听滚动实现锚点定位方式(双向),锚点问题
作者：波塞西呀
这篇文章主要介绍了vue+element-ui监听滚动实现锚点定位方式(双向),锚点问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue+element-ui监听滚动实现锚点定位(双向),锚点问题
双向绑定锚点问题是最近项目中遇到的一个问题，网上也有很多方法，不过还是想自己记录一下。
需求
滚动内容为左右布局的右边内容栏内，内容滚动 左边 定位 右边内容滚动。
话不多说，直接看代码
注意：class=“d_jump”
<userInfo class="d_jump" ref="d_jump" :userInfo="userInfolists"></userInfo>
<el-menu
:default-active="activeName"
class="hk-person-item"
text-color="#333"
mode="horizontal"
@select="handleSelect()"
:style="{top: NavDistance + 'px'}"
>
<el-menu-item @click="jump(0)" index="1">
<span >个人信息</span>
</el-menu-item>
<el-menu-item @click="jump(1)" index="2">
<span>求职意向</span>
</el-menu-item>
<el-menu-item @click="jump(2)" index="3">
<span>求职状态</span>
</el-menu-item>
<el-menu-item @click="jump(3)" index="4">
<span>教育经历</span>
</el-menu-item>
<el-menu-item @click="jump(4)" index="5">
<span>工作经历</span>
</el-menu-item>
<el-menu-item @click="jump(5)" index="6">
<span>项目经历</span>
</el-menu-item>
<el-menu-item @click="jump(6)" index="7">
<span>我的证书</span>
</el-menu-item>
</el-menu>
<div class="hk-details-bar" id="state" ref="myMenu">
<div id="resumes" class="hk-details-title" >
<jwIntention class="d_jump" ref="d_jump" :jwList="jwList" ></jwIntention>
<workState class="d_jump" ref="d_jump" :jobWantState="jobWantState"></workState>
<education class="d_jump" ref="d_jump" :eduLists="educationList"></education>
<workFor class="d_jump" ref="d_jump" :workList="workList"></workFor>
<myProject class="d_jump" ref="d_jump" :projectList="projectList"></myProject>
<myCert class="d_jump" ref="d_jump" :certList="certList"></myCert>
</div>data () {
return {
activeName: '1',
isActive: '1',
scrolls: {},
NavDistance: 321,
navStyle: 0,
scrollHeight: 0,
}
}相关代码
mounted: function () {
this.$nextTick(function () {
window.addEventListener('scroll', this.onScroll)
})
},
methods: {
handleSelect (key, keyPath) {
console.log(key, keyPath)
var index = ''
index = key
console.log(index)
// if (index === '2') {
// this.$router.push({path: '/front/project'})
// this.activeName = '3'
// }
},
onScroll () {
let scrolled = document.documentElement.scrollTop || document.body.scrollTop
if (scrolled >= 1300) {
this.activeName = '7'
console.log('7')
} else if (scrolled < 60 && scrolled >= 0) {
this.activeName = '1'
console.log('1')
} else if (scrolled < 150 && scrolled >= 60) {
this.activeName = '2'
console.log('2')
} else if (scrolled < 200 && scrolled >= 100) {
this.activeName = '3'
console.log('3')
} else if (scrolled < 600 && scrolled >= 500) {
this.activeName = '4'
console.log('4')
} else if (scrolled < 700 && scrolled >= 600) {
this.activeName = '5'
console.log('5')
} else if (scrolled < 800 && scrolled >= 700) {
this.activeName = '6'
console.log('6')
}
},
onScrollBehavior (index) {
},
// 锚点实验
jump (index) {
console.log(index)
let active = index.toString()
this.isActive = active
// 判断导航高度
// myMenu
let height = this.$refs.myMenu.offsetHeight
// 用 class="d_jump" 添加锚点
let jump = window.document.querySelectorAll('.d_jump')
let total = jump[index].offsetTop
console.log(total)
let distance = document.documentElement.scrollTop || document.body.scrollTop
// 平滑滚动，时长500ms，每10ms一跳，共50跳
let step = total / 50
// 判断小导航距离顶部的位置
let newDistance = this.NavDistance
if (index === 0 && newDistance < total) {
newDistance = 321
} else if (index > 0 || index <= 6) {
this.NavDistance = total
} else {
this.NavDistance = total - 600
}
if (total > distance) {
smoothDown()
} else {
let newTotal = distance - total
step = newTotal / 50
smoothUp()
}
function smoothDown () {
if (distance < total) {
distance += step
document.body.scrollTop = distance
document.documentElement.scrollTop = distance
setTimeout(smoothDown, 10)
} else {
document.body.scrollTop = total
document.documentElement.scrollTop = total
}
}
function smoothUp () {
if (distance > total) {
distance -= step
document.body.scrollTop = distance
document.documentElement.scrollTop = distance
setTimeout(smoothUp, 10)
} else {
document.body.scrollTop = total
document.documentElement.scrollTop = total
}
}
}
},
watch: {
activeName: function () {
console.log(this.activeName)
}
}element步骤条增加锚点的实现
element的步骤条默认样式是无法点击的，需求中有点击步骤条，页面滚动到特定锚点需求
实现如下：
<el-card shadow="never" :body-style="{ padding: '5px' }" id="mySteps">
<el-steps simple>
<el-step v-for="(step,index) in laSteps" :title="step.title" :icon="step.icon"
:key="index"
:href="step.href" rel="external nofollow" :status="step.status" v-if="step.isShow"></el-step>
</el-steps>
</el-card>1.每个步骤条中 :href=“step.href” 锚点是通过一个href与一个id实现跳转，这里的href仅仅作为一种标识与需要跳转的点id相同即可
$('.el-step__title').click(function () {
var goHref = '#' + $(this).parent().parent().attr('href')
var anchor = that.$el.querySelector(goHref)
$('#djla').animate({
scrollTop: anchor.offsetTop
}, 500);
});2.获取到href的值,根据这个值决定跳转到什么地方.
3.$(’#djla’)为jq选中整个需滚动区域
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。