本文主要介绍vue的scrollIntoView()方法实现锚点跳转，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
vue锚点跳转scrollIntoView()方法滚动到特定元素一个简单的vue锚点跳转演示
vue锚点跳转scrollIntoView()方法
滚动到某个特定元素
scrollIntoView()；这个方法不需要获取右边字幕的高度，不需要任何东西，只需要id或者class，几乎可以满足你的跳锚、对齐、平滑滚动的所有要求。
下面是v-for循环出来需要点击跳转到对应div的事件。
数据' @ click=' scrollToPosition(index)' { {.}}/p
这就是当你点击scrollToPosition事件时，你需要滚动相应的div。
数据' class='roll'{中的div v-for='(值，索引).} }/分区
js部分
方法：{
滚动位置(索引){
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({
行为：auto//定义动画过渡效果“自动”或“平滑”之一。默认值为“自动”。
block:start///定义垂直对齐方式，为“start”、“center”、“end”或“nearest”之一。默认值为“开始”。
Inline:最近的//'start '，' center '，' end '或' nearest '之一。默认值为“最近”。
})
其中smooth是平滑滚动，start和end是目标滚动的位置。
注意：
兼容性问题大部分主流浏览器都已经支持其基本功能，也就是说使用true和false两个参数来实现木讷的定位(不需要滚动动画)是没有问题的。但是引入了object参数，不得不说IE的所有版本都会被直接忽略，全部视为真参数属性。想看滚动动画，只有火狐和chrome。
一个简单的vue锚点跳转demo
直接拿过来粘贴就行了
模板
div class='自动调整编辑'
！按钮
div class='操作-btn '
' div class=' BTN-item ' v-for='(item，index)in part list ':key=' index ' @ click=' jump(index)'
:style=' { background:active step===index？'#eeeeee' : '#ffffff'}'{{item}}
/div
/div
！-滚动区-
' scroll-content ' @ scroll=' on scroll '
div class='滚动项目'
Class=' part-title '基本信息/div
/div
div class='滚动项目'
风险控制/部门
/div
div class='滚动项目'
成本控制/部门
/div
div class='滚动项目'
Class=' part-title '量值控制/div
/div
div class='滚动项目'
' part-title '新计划管理/部门
/div
div class='滚动项目'
旧计划管理/部门
/div
div class='滚动项目'
垃圾计划清理/分区
/div
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
activeStep: 0，
PartList: ['基本信息'，'风险控制'，'成本控制'，'量级控制'，'新计划管理'，'旧计划管理'，'垃圾计划清理']
}
},
方法：{
//滚动触发器按钮突出显示
onScroll (e) {
let scroll items=document . query selector all('。滚动项目’)
for(让I=scroll items . length-1；I=0；我- ) {
//判断滚动条的滚动距离是否大于当前滚动项的可滚动距离。
让法官=e .目标。scroll top=滚动项目[I].offsetTop - scrollItems[0].offsetTop-100；
如果（法官){
this.activeStep=i
破裂
}
}
},
//点击切换锚点
跳转（索引){
让目标=文档。查询选择器(.滚动内容)
让滚动项目=文档。查询选择器全部(.滚动项目)
//判断滚动条是否滚动到底部
如果(目标。滚动高度=目标。滚动顶部目标。客户身高){
this.activeStep=index
}
设total=scrollItems[index].offsetTop - scrollItems[0].offsetTop //锚点元素距离其offsetParent(这里是正文)顶部的距离（待滚动的距离)
设距离=文档。查询选择器(.滚动内容)。scrollTop //滚动条距离滚动区域顶部的距离
//让距离=文档。身体。向上滚动| |文档。文档元素。滚动顶部| |窗口。页面偏移//滚动条距离滚动区域顶部的距离（滚动区域为窗口)
//滚动动画实现，使用设置超时的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
//计算每一小段的距离
假设步长=总计/50
如果（总距离){
平滑(文档。查询选择器(.滚动-内容'))
}否则{
让新总计=距离-总计
步骤=新总计/50
平滑(文档。查询选择器(.滚动-内容'))
}
//参数元素为滚动区域
函数平滑(元素){
如果（总距离){
距离=步
element.scrollTop=距离
setTimeout(平滑。bind(this，element)，1)
}否则{
element.scrollTop=total
}
}
//参数元素为滚动区域
函数平滑（元素){
如果（总距离){
距离=步长
element.scrollTop=距离
setTimeout(smoothUp.bind(this，element)，1)
}否则{
element.scrollTop=total
}
}
//document.querySelectorAll(' .滚动项目')。forEach((item，index1)={
//if (index===index1) {
//item.scrollIntoView({
//block: 'start '，
//行为："平滑"
//})
//}
//})
}
}
}
/脚本
样式lang='scss '范围。自动调整-编辑{
弹性基础：100%;
显示器：flex
溢出：隐藏；
高度：500像素
身高：100%;
//侧边栏。操作-btn {
宽度：9.5%;
身高：95%;
右边距：0.5%;
填充顶部：1%;
margin-top:4px；
背景：白色；
边框：1px纯色rgb(190，188，188)；
边框-半径：6px
box-shadow: 0 3px 12px 0 rgba(0，0，0，0.2)；BTN-项目{
高度：40px
行高：40px
左填充：20px
光标：指针；
}
}
//表单内容。滚动内容{
身高：100%;
宽度：90%;
溢出：自动；滚动项目{
背景：白色；
边框半径：8px
边距-底部：6px
边框：1px纯色rgb(216，214，214)；
最小高度：300像素
//标题。部分标题{
高度：40px
行高：40px
字体粗细：600;
左填充：10px
}
//表单
/深/。el-form {
边框：1px纯色rgb(190，189，189)；
宽度：98%;
边距：10px自动30px
边框-半径：6px
/深/。El-表单-项目{
边距-底部：12px
页边距-顶部：10px
}
}
}
}
}
/风格
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。