Vue下实现步骤条定位到指定位置，并且滚动条实现联动效果。

效果如下：

这个位置调节滚动条指定位置的间距，顶部步骤条53像素，这里至少要给到50像素。

我这里有个document.getElementById('app')，指的是我的滚动条在id=app上，在父页面中。

如果滚动条在body上，就把document.getElementById('app')的都注释掉，用下面注释的那几行代码。

<template>
    <section>
        <transition v-if="!$route.meta.NoNeedHome" name="fade"
                    mode="out-in">
            <el-row class="study-add-main">
                <el-col class="study-add-title">
                    <i class="el-icon-document"></i> 新建学习计划
                </el-col>

                <el-col>
                    <el-col style="position:fixed;top:60px;left:0px; z-index:90;">
                        <div class="page-pagecontainer">
                            <el-steps :active="StepInfo.Active" simple>
                                <el-step title="基本信息" icon="el-icon-edit" @click.native="scrollTo('add-basic',1)"></el-step>
                                <el-step title="学习内容" icon="el-icon-s-order" @click.native="scrollTo('add-content',2)"></el-step>
                                <el-step title="指定学员" icon="fa fa-users" @click.native="scrollTo('add-user',3)"></el-step>
                                <el-step title="概要统计" icon="fa fa-users" @click.native="scrollTo('add-total',4)"></el-step>
                            </el-steps>
                        </div>
                    </el-col>
                </el-col>
                <el-col>
                    <el-collapse v-model="StepInfo.ActiveItemName">
                        <el-collapse-item id="add-basic" name="1" class="study-add-item">
                            <template slot="title">
                                <el-col class="study-add-item-title study-add-item-basic" style="padding-left:10px;">基本信息</el-col>
                            </template>
                            <el-row>
                                <el-col style="padding-top:20px;">
                                    <el-form :model="addForm.StudyPlanInfo" label-width="110px" :rules="addFormRules" ref="StudyPlanInfo">
                                        <el-row>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="计划名称" prop="StudyPlanName">
                                                    <el-input v-model="addForm.StudyPlanInfo.StudyPlanName" maxlength="20" autocomplete="off"></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="分类" prop="ParentCategoryID">
                                                    <el-cascader style="width:100%;" v-model="addForm.StudyPlanInfo.StudyCategoryID"
                                                                 :options="CategoryList"
                                                                 filterable
                                                                 change-on-select></el-cascader>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="负责人" prop="IsPublic">
                                                    <el-switch v-model="addForm.StudyPlanInfo.FollowUser" active-value="1" inactive-value="0">
                                                    </el-switch>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="开始时间" prop="Sort">
                                                    <el-date-picker v-model="addForm.StudyPlanInfo.StartDateTime" type="datetime" placeholder="请选择开始时间" style="width:100%;"></el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="结束时间" prop="Sort">
                                                    <el-date-picker v-model="addForm.StudyPlanInfo.EndDateTime" type="datetime" placeholder="请选择结束时间" style="width:100%;"></el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="到期通知">
                                                    <el-switch v-model="addForm.StudyPlanInfo.IsAutoNotice" active-value="1" inactive-value="0">
                                                    </el-switch>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="自动归档" prop="IsAutoArchiving">
                                                    <el-switch v-model="addForm.StudyPlanInfo.IsAutoArchiving" active-value="1" inactive-value="0">
                                                    </el-switch>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="重要性" prop="IsSkipChapter">
                                                    <el-input-number v-model="addForm.StudyPlanInfo.IsSkipChapter" :step="1" :max="5" :min="1" placeholder="请输入重要性" autocomplete="off" style="width:100%;"></el-input-number>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="排序" prop="Sort">
                                                    <el-input-number v-model="addForm.StudyPlanInfo.Sort" :step="1" placeholder="请输入排序位置" :max="100" :min="0" autocomplete="off"></el-input-number>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="23" :lg="23">
                                                <el-form-item label="描述">
                                                    <el-input v-model="addForm.StudyPlanInfo.Description" type="textarea" autocomplete="off" :autosize="{ minRows: 4, maxRows: 8}" maxlength="500" show-word-limit></el-input>
                                                </el-form-item>
                                            </el-col>

                                        </el-row>
                                    </el-form>
                                </el-col>
                            </el-row>
                        </el-collapse-item>
                        <el-collapse-item id="add-content" name="2" class="study-add-item">
                            <template slot="title">
                                <el-col class="study-add-item-title study-add-item-content" style="padding-left:10px;">学习内容</el-col>
                            </template>
                            <el-row>
                                <el-col style="padding-top:20px;">
                                    <el-form :model="addForm.ChapterList" label-width="110px" :rules="addFormRules" ref="ChapterList">
                                        <el-row>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="跳过学习计划章节" prop="IsSkipChapter">
                                                    <el-switch v-model="addForm.StudyPlanInfo.IsSkipChapter" active-value="1" inactive-value="0">
                                                    </el-switch>
                                                </el-form-item>
                                            </el-col>


                                        </el-row>
                                    </el-form>
                                </el-col>
                            </el-row>
                        </el-collapse-item>
                        <el-collapse-item id="add-user" name="3" class="study-add-item">
                            <template slot="title">
                                <el-col class="study-add-item-title study-add-item-user" style="padding-left:10px;">指定学员</el-col>
                            </template>
                            <el-row>
                                <el-col style="padding-top:20px;">
                                    <el-form :model="addForm.EmployeeList" label-width="110px" :rules="addFormRules" ref="EmployeeList">
                                        <el-row>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="学习范围" prop="StudyPlanLimit">
                                                    <el-switch v-model="addForm.StudyPlanInfo.StudyPlanLimit" active-value="1" inactive-value="0">
                                                    </el-switch>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="新员工自动添加学习计划" prop="IsNewEmployeeAutoStudy">
                                                    <el-switch v-model="addForm.StudyPlanInfo.IsNewEmployeeAutoStudy" active-value="1" inactive-value="0">
                                                    </el-switch>
                                                </el-form-item>
                                            </el-col>

                                        </el-row>
                                    </el-form>
                                </el-col>
                            </el-row>
                        </el-collapse-item>
                        <el-collapse-item id="add-total" name="4" class="study-add-item">
                            <template slot="title">
                                <el-col class="study-add-item-title study-add-item-total" style="padding-left:10px;">概要统计</el-col>
                            </template>
                            <el-row>
                                <el-col style="padding-top:20px;">
                                    名称，负责人,
                                    几个对应的是否设置选项
                                    总学分，总学时，总知识数，学员总数
                                </el-col>
                            </el-row>
                        </el-collapse-item>
                    </el-collapse>
                </el-col>


            </el-row>
        </transition>
    </section>
</template>
<script>
    export default {
        name: "StudyPlan_Add",
        components: {},
        data() {
            return {
                pageName: "新增学习计划",
                ProgressSet: {
                    Colors: [
                        { color: '#f56c6c', percentage: 20 },
                        { color: '#e6a23c', percentage: 40 },
                        { color: '#5cb87a', percentage: 60 },
                        { color: '#1989fa', percentage: 80 },
                        { color: '#6f7ad3', percentage: 100 }
                    ]
                },
                StepInfo: {
                    Active: 1,
                    ActiveItemName: ['1', '2', '3', '4'], //展开所有折叠板
                },

                addLoading: false,
                addFormRules: {
                    CategoryName: [
                        { required: true, message: '请输入分类名称', trigger: 'blur' }
                    ],
                },
                //新增界面数据
                addForm: {
                    StudyPlanInfo: {
                        StudyCategoryID: 123,
                        StudyPlanName: "",
                        FollowUser: "张三",
                        CreateUserName: "张三",
                        StartDateTime: "2021-01-01",
                        EndDateTime: "2021-01-31",
                        CreateDateTime: "2021-01-01",
                        CreditStandard: 34,
                        StudyStandard: 24,
                        Description: "",
                        IsAutoNotice: 0,
                        IsAutoArchiving: 0,
                        IsSkipChapter: 0,
                        ImportantLevel: 0,
                        StudyPlanLimit: 0,
                    },
                    ChapterList: [
                        {
                            StudyPlanChapterName: "章节名称",
                            IsSkipChapter: 0,
                            Sort: 0,
                            ItemList: [
                                {
                                    StudyPlanItemName: "名称",
                                    ReferType: 1,
                                    ReferID: 1234,
                                    LearnMinutes: 12,
                                    Credit: 6,
                                    Sort: 1
                                },
                                {
                                    StudyPlanItemName: "名称2",
                                    ReferType: 1,
                                    ReferID: 123234,
                                    LearnMinutes: 12,
                                    Credit: 6,
                                    Sort: 1
                                }
                            ],
                        },
                        {
                            StudyPlanChapterName: "章节名称2",
                            IsSkipChapter: 0,
                            Sort: 0,
                            ItemList: [
                                {
                                    StudyPlanItemName: "名称3",
                                    ReferType: 3,
                                    ReferID: 12341,
                                    LearnMinutes: 12,
                                    Credit: 6,
                                    Sort: 1
                                },
                                {
                                    StudyPlanItemName: "名称4",
                                    ReferType: 1,
                                    ReferID: 12343,
                                    LearnMinutes: 12,
                                    Credit: 6,
                                    Sort: 1
                                }
                            ],
                        }
                    ],
                    EmployeeList: [
                        {
                            EmployeeID: 1,
                            Name: '张三',
                        },
                        {
                            EmployeeID: 2,
                            Name: '李四',
                        }
                    ],
                },

            }
        },
        methods: {
            //滚动监听器
            onScroll() {
                const navContents = document.querySelectorAll('.study-add-item');
                const offsetTopArr = [];
                navContents.forEach(item => {
                    offsetTopArr.push(item.offsetTop);
                })
                //有顶部菜单，加80的高度 -无间隔加50就可以了
                const scrollTop = document.documentElement.scrollTop || document.getElementById('app').scrollTop + 80;
                //const scrollTop = document.documentElement.scrollTop || document.body.scrollTop.scrollTop + 80;
                let navIndex = 0
                for (let n = 0; n < offsetTopArr.length; n++) {
                    if (scrollTop >= offsetTopArr[n]) {
                        navIndex = n;
                    }
                }
                this.StepInfo.Active = navIndex + 1;
            },
            //定位到指定位置
            scrollTo(tagName, index) {
                this.StepInfo.Active = index;
                //有顶部菜单，要减掉50的高度
                const targetOffsetTop = document.querySelector('#' + tagName + '').offsetTop - 50;
                // 获取当前 offsetTop
                let scrollTop = document.documentElement.scrollTop || document.getElementById('app').scrollTop;
                //let scrollTop = document.documentElement.scrollTop || document.body.scrollTop.scrollTop;

                const STEP = 50;
                if (scrollTop > targetOffsetTop) {
                    smoothUp(); // 往上滑
                } else {

                    smoothDown();// 往下滑
                }

                // 往下滑函数
                function smoothDown() {
                    // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
                    if (scrollTop < targetOffsetTop) {
                        if (targetOffsetTop - scrollTop >= STEP) {
                            scrollTop += STEP;
                        } else {
                            scrollTop = targetOffsetTop;
                        }
                        //滚动条定位在id=app上
                        document.getElementById('app').scrollTop = scrollTop;
                        //document.body.scrollTop = scrollTop;
                        //document.documentElement.scrollTop = scrollTop;
                        window.requestAnimationFrame(smoothDown);
                    }
                }
                // 往上滑函数
                function smoothUp() {
                    if (scrollTop > targetOffsetTop) {
                        if (scrollTop - targetOffsetTop >= STEP) {
                            scrollTop -= STEP;
                        } else {
                            scrollTop = targetOffsetTop;
                        }
                        //滚动条定位在id=app上
                        document.getElementById('app').scrollTop = scrollTop;
                        //document.body.scrollTop = scrollTop
                        //document.documentElement.scrollTop = scrollTop
                        window.requestAnimationFrame(smoothUp);
                    }
                }
            }

        },
        mounted() {
            // 监听滚动事件
            document.getElementById('app').addEventListener('scroll', this.onScroll, false);
        },
        destroy() {
            // 必须移除监听器
            document.getElementById('app').removeEventListener('scroll', this.onScroll)
        },

    }</script>
<style scoped>
    .study-add-main {
        color: #333;
        font-size: 14px;
        padding: 30px 20px;
        padding-top: 90px;
        line-height: 24px;
        background-color: #fff;
    }

    .study-add-title {
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        padding-bottom: 50px;
    }

    .study-add-item-title {
        font-size: 22px;
        padding-left: 10px;
    }

    .study-add-item-basic {
        border-left: 5px solid #3979ff;
    }

    .study-add-item-content {
        border-left: 5px solid #ff8e39;
    }

    .study-add-item-user {
        border-left: 5px solid rgb(190, 25, 187);
    }

    .study-add-item-total {
        border-left: 5px solid #fe6c6f;
    }

    /* 内容区的样式 */
    .content {
        background-color: white;
        width: 500px;
    }

        .content div {
            width: 100%;
            height: 600px;
            font-size: 36px;
            padding: 20px;
            background-color: #7ec384;
        }

            .content div:nth-child(2n) {
                background-color: #847ec3;
            }
    /* 导航栏的样式 */
    .navs {
        position: fixed;
        top: 80px;
        left: 700px;
        background-color: #efefef;
    }

        .navs li {
            padding: 0 20px;
            line-height: 1.6;
            font-size: 24px;
        }
        /* 当导航被点亮后改变颜色 */
        .navs .active {
            color: #847ec3;
            background-color: #e2e2e2;
        }
</style>
<style>
    .page-pagecontainer .el-step__title:hover {
        color: #5eadff;
        cursor: pointer;
    }
<style>