vue+element 学习之路（十三）scrollBy简单实现锚点定位（单向）

这个锚点定位的思路非常简单，代码也非常简单，但是缺点就是不兼容IE9，暂时先以这个为思路分享下方法。

思路：
1.给dom元素设立锚点（这里以ID为锚点）；
2.点击瞬间计算页面顶部到达dom的距离。
3.计算页面已经滚动的距离。
4.根据2和3判断需要上滚还是下滚。
5.滚动。

点击事件触发方法，jump的参数即为锚点ID：

源码：

<template>
    <div style="height:600px;" class="step">

        <el-button class="stepBtn"  @click="jump('photo')" icon="el-icon-picture-outline-round" circle=""></el-button> -个人头像 <br>
        <el-button class="stepBtn"  @click="jump('user-info')" icon="el-icon-coordinate" circle=""></el-button> -个人信息 <br>
        <el-button class="stepBtn"  @click="jump('introduction')" icon="el-icon-edit-outline" circle=""></el-button> -个人介绍 <br>
        <el-button class="stepBtn"  @click="jump('job-intention')" icon="el-icon-suitcase" circle=""></el-button> -求职意向 <br>
        <el-button class="stepBtn"  @click="jump('educational-background')" icon="el-icon-office-building" circle=""></el-button> -教育经历 <br>
    </div>
</template>


<script>
export default {
    methods:{
        jump(domId){
            // 当前窗口正中心位置到指定dom位置的距离

            //页面滚动了的距离
            let height = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 
            
            //指定dom到页面顶端的距离
            let dom = document.getElementById(domId);
            let domHeight = dom.offsetTop+60;
            
            //滚动距离计算
            var S = Number(height) - Number(domHeight);

            //判断上滚还是下滚
            if(S<0){
                //下滚
                S = Math.abs(S);
                window.scrollBy({ top: S, behavior: "smooth" });
            }else if(S==0){
                //不滚
                window.scrollBy({ top: 0, behavior: "smooth" });
            }else{
                //上滚
                S = -S
                window.scrollBy({ top: S, behavior: "smooth" });
            }
        }
    }
}
</script>

<style scoped>
.step{
    font-family: "Helvetica Neue";
    
}
.stepBtn{
    margin-bottom: 15px;
}
</style>