el-steps 实现锚点定位

1.点击的块

 <el-steps direction="vertical" :active="stepList.length + 1"  
            :space="64" >
                <el-step :title="item.title" v-for="(item,index) in stepList" :key="index" @click.native="handelStepClick(item.id)"></el-step>
            </el-steps>

2.定位的块

<div id="pd-scroll-box" >

<el-form-item prop="info" label="①产品简介" id="anchor1" >

<el-input v-model="productInfo.info" placeholder="请输入产品简介" type="textarea"></el-input>

</el-form-item>

<el-form-item label="②产品优势" id="anchor2">

<div class="pd-add-line" v-for="(item,index) in productInfo.pdAdvList" :key="index">

<span class="pd-add-index mr10">优势{{ sectionToChinese(index+1) }}：</span>

<el-form-item inline prop="info" class="inline-input mr10">

<el-input inline v-model="item.adv" type="text"></el-input>

</el-form-item>

<el-button v-if="index==0" type="text" @click="addAdv">+新增</el-button>

<el-button v-else type="text" @click="delAdv(index)"><i class="el-icon-delete"></i>删除</el-button>

</div>

</el-form-item>

<el-form-item label="③适合对象" id="anchor3">

<div v-for="(item,index) in productInfo.pdConfList" :key="index">

<span class="mr10">对象{{ sectionToChinese(index+1) }}：</span>

<el-form-item class="inline-input mr10" prop="info" >

<el-input v-model="item.conf" type="text"></el-input>

</el-form-item>

<el-button v-if="index==0" type="text" @click="addConf">+新增</el-button>

<el-button v-else type="text" @click="delConf(index)"><i class="el-icon-delete"></i>删除</el-button>

</div>

</el-form-item>

<el-form-item label="④办理流程" prop="info" id="anchor4">

<el-input v-model="productInfo.info" type="textarea"></el-input>

</el-form-item>

<el-form-item label="⑤营销话术" prop="info" id="anchor5">

<el-input v-model="productInfo.info" type="textarea"></el-input>

</el-form-item>

<el-form-item label=" ⑥常见问题" prop="info" id="anchor6">

<div v-for="(item,index) in productInfo.usuaQA" :key="index">

<div>

<span>问题：</span>

<el-form-item class="inline-input mt10">

<el-input v-model="item.ques" style="width: 300px;" type="text"></el-input>

</el-form-item>

<el-button v-if="index==0" type="text" @click="addQA">+新增</el-button>

<el-button v-else type="text" @click="delQA(index)"><i class="el-icon-delete"></i>删除</el-button>

</div>

<div>

<span>回答：</span>

<el-form-item class="inline-input">

<el-input v-model="item.answ" style="width: 400px;" type="textarea"></el-input>

</el-form-item>

</div>

</div>

</el-form-item>

<el-form-item prop="info" label="⑦办理链接" id="anchor7">

<el-input v-model="productInfo.info" type="textarea"></el-input>

</el-form-item>

<div>

</div>

</div>

3.js部分

stepList: [

{title: '产品简介', id: 'anchor1'},

{title: '产品优势', id: 'anchor2'},

{title: '适用对象', id: 'anchor3'},

{title: '办理流程', id: 'anchor4'},

{title: '营销话术', id: 'anchor5'},

{title: '常见问题', id: 'anchor6'},

{title: '办理链接', id: 'anchor7'}

]

computed: {

scrollFn() { // 防抖

return this.scroll

},

},

mounted() {

this.$nextTick(function() {

window.addEventListener('scroll', this.scroll)

})

},

handelStepClick(id){

this.activeStep = id // 设置选中的锚点为当前点击的

debugger;

const box = document.getElementById('pd-scroll-box')

let scrollItem = document.getElementById(id)

// 锚点对应的模块与最近的一个具有定位的祖宗元素顶部的距离

this.offsetTop = scrollItem.offsetTop

box.scrollTo({

top: scrollItem.offsetTop,

behavior: "smooth",

});

},

scroll() {

const box = document.getElementById('pd-scroll-box')

// 若当前设置的滚动高度大于实际滚动的高度，即为锚点跳转，不再设置选中的锚点

if(this.offsetTop > box.scrollTop) {

this.offsetTop = 0

return

}

let totalH = 0

this.anchorList.some(anchor=> {

let scrollItem = document.getElementById(anchor.id)// 锚点对应的模块

totalH = totalH + scrollItem.clientHeight

let judge = box.scrollTop < totalH

if(judge) {

this.activeStep = anchor.id

return true

}

})

},