在前端开发过程中，当页面内容分为若干栏目后，通过增加导航栏位定位至相应栏目不失为一种良好的用户体验。
应用el-steps可实现页面内栏目跳转。el-steps基本用法如下：
<el-steps :active="active" finish-status="success"><el-step title="步骤 1"></el-step><el-step title="步骤 2"></el-step><el-step title="步骤 3"></el-step>
</el-steps>
<el-button style="margin-top:12px;" @click="next">下一步</el-button>data:{active:0
},
methods:{next(){if(this.active++ >2){this.active = 0}}
}二、属性介绍
下面重点介绍el-steps的direction、space、active、process-status、align-center属性，如下:
通过查看Element手册，需要定宽的步骤条时，设置space属性即可，单位为px，如果不设置为自适应（若不确定步骤条中每一步骤中内容高度或宽度，可设置为自适应；为使界面美观，可修改el-step属性：
.el-step__main {width: 100%!important;padding-left: 3%!important;margin-bottom: 3%!important;
}）
el-step属性如下图所示：
这里重点介绍下如何应用el-steps动态展示所需信息。
三、Demo
<div><el-steps direction="vertical" :align-center="true" :active="arr.length" finish-status="success"><el-step :title="item.title" :description="item.description" v-for="(item, index) in arr" :key="index" @click.native="onCLick(index)"><template slot="description"><!--表单内容--></template></el-step>
</el-steps>
</div>
<div><transition name="slide-fade"><div v-if="shownav" class="rightList"><span class="line\_prev"></span><ul><li v-for="(item, index) in navArr" :key="index" @click="crollTo(index)" :class="{active: active====index}"><img src="cue.png" v-if="active === index"></li></ul><span class="line\_next"></span></div></transition>
</div>以上只是实现了步骤条内容的动态展示，若需实现根据用户浏览内容定位导航栏目或者根据导航栏目快速定位至相关栏目处，需通过动态监听页面内容实现。
<!--流程流转处理节点导航栏位-->
<div v-if="flowopinoin.length > 4" :class="[flowopinoin.length > 10 ? 'navConst' : 'nav']"><div :class="[flowopinoin.length > 10 ? 'navStyleConst' : 'navStyle']"><transition name="slide-fade"><div v-if="shownav" class="rightList"><span class="line\_prev"></span><ul><li v-for="(item, index) in flowopinoin" :key="index" @click="scrollTo(index)" :class="{active: active===index}"><img src="../../../assets/img/cur.png" width="20" v-if="active === index"/><span>{{item.nodename}}</span></li></ul><span class="line\_next"></span></div></transition></div><el-button @click="shownav = !shownav" type="primary" :class="[flowopinoin.length > 10 ? 'shownavConst' : 'shownav']"><i style="margin-left: -6px;" :class="[shownav ? 'el-icon-d-arrow-right': 'el-icon-d-arrow-left']"></i></el-button>
</div>
<script>this.$nextTick(() => {// 监听滚动事件window.addEventListener('scroll', this.onScroll, false)})// 滚动监听器
onScroll () {// 获取所有锚点元素const navContents = document.querySelectorAll('.el-steps>.el-step')// console.log('navContents:', navContents)// 所有锚点元素的 offsetTopconst offsetTopArr = []for (let i = 0; i < navContents.length; i++) {offsetTopArr.push(navContents[i].offsetTop)}// navContents.forEach(item => {// offsetTopArr.push(item.offsetTop)// })// 获取当前文档流的 scrollTopconst scrollTop = document.documentElement.scrollTop || document.body.scrollTop// 定义当前点亮的导航下标for (let n = 0; n < offsetTopArr.length; n++) {// 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见// 那么此时导航索引就应该是n了// console.log('scrollTop:', scrollTop)// console.log('offsetTopArr[n]:', offsetTopArr[n])if (scrollTop >= offsetTopArr[n]) {this.navIndex = n}}this.active = this.navIndex
},
// 跳转到指定索引的元素
scrollTo (index) {// 获取目标的 offsetTop// css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1const targetOffsetTop = document.querySelector(`.el-steps>.el-step:nth-child(${index + 1})`).offsetTop// 获取当前 offsetToplet scrollTop = document.documentElement.scrollTop || document.body.scrollTop// 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，步子迈大了会扯到蛋const STEP = 50// 判断是往下滑还是往上滑// console.log('scrollTop:', scrollTop)// console.log('targetOffsetTop:', targetOffsetTop)if (scrollTop >= targetOffsetTop) {// 往上滑smoothUp()} else {// 往下滑smoothDown()}// 定义往下滑函数function smoothDown () {// 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置if (scrollTop < targetOffsetTop) {// 如果和目标相差距离大于等于 STEP 就跳 STEP// 否则直接跳到目标点，目标是为了防止跳过了。if (targetOffsetTop - scrollTop >= STEP) {scrollTop += STEP} else {scrollTop = targetOffsetTop}document.body.scrollTop = scrollTopdocument.documentElement.scrollTop = scrollTop// 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高requestAnimationFrame(smoothDown)}
}
// 定义往上滑函数
function smoothUp () {if (scrollTop > targetOffsetTop) {if (scrollTop - targetOffsetTop >= STEP) {scrollTop -= STEP} else {scrollTop = targetOffsetTop}document.body.scrollTop = scrollTopdocument.documentElement.scrollTop = scrollToprequestAnimationFrame(smoothUp)}
}
}
</script>
<style>@charset "UTF-8";.navConst {position:fixed;right: 3%;top:15%;}.nav {position:fixed;right: 2%;top:15%;}.navStyleConst {position:fixed;top:15%;cursor: pointer;right: 3%;width: 7%;height: auto;max-height:800px;overflow: scroll;overflow-x: hidden;}.navStyle {position:fixed;top:51%;cursor: pointer;right: 2%;width: 7%;height: auto;}.shownavConst {position:absolute;right: -37px;top: 50%;width: 10px;height: 100px;}.shownav {position: fixed;right:18px;top: 57%;}.shownav2 {position: fixed;right:18px;top: 38%;}ul {list-style: none;}.active img {position: absolute;left: -26px;top: 5px;z-index: 2;}.line\_prev{display:inline-block;width: 1px;height:20px;background:#ccc;position:relative;left:20px;bottom:-8px;}.line\_prev:before{content: '';position:absolute;width:9px;height:9px;border-radius:50%;border:2px solid #EDEDED;z-index:1;left:-4px;top:-8px;}.rightList li{position:relative;line-height:25px;cursor:pointer;padding-bottom:16px;}.rightList li span{padding-left:5px;border-bottom: 1px solid #e3e5eb;}.rightList li:before{### 基础学习：前端最基础的就是 HTML , CSS 和 JavaScript 。##### 网页设计：HTML和CSS基础知识的学习HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。##### 动态交互：JavaScript基础的学习JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。图片、视频等。[外链图片转存中...(img-KmaufE6t-1718770565702)]CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。[外链图片转存中...(img-1GfR9RRV-1718770565703)]##### 动态交互：JavaScript基础的学习JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
