在vue项目使用原生js做锚点平滑滚动

如题所述，想必大家经常在vue项目中要用到锚点点击页面平滑滚动的效果，网上也有很多的插件，今天分享一个原生js简单实现的方法。

如图所示，我的需求是点击左边的菜单，右边内容平滑滚动到相应内容，下面贴出部分代码：

             
系统
             
规格
             
网络
             
打印机
             
消息与隐私
             
关于
   

js部分代码：

toScroll(index){
            this.currents = index   
            // 用 class="scroll_title" 添加锚点
            let jump = document.querySelectorAll(".scroll_title")
            let scroll_content = document.querySelector(".scroll_content")
            let total = jump[index-1].offsetTop-223  //这里的223是我头部header的高度
            let distance = scroll_content.scrollTop   //获取需要滚动的距离
            // 平滑滚动，时长500ms，每10ms一跳，共50跳
            let step = total / 50
            if (total > distance) {
                smoothDown()
            } else {
                let newTotal = distance - total
                step = newTotal / 50
                smoothUp()
            }
            function smoothDown () {
                if (distance < total) {
                    distance += step
        　　　　　　　scroll_content.scrollTop = distance 
                    setTimeout(smoothDown, 10)
                } else {
                    scroll_content.scrollTop = total    
                }
            }
            function smoothUp () {
                if (distance > total) {
                    distance -= step
        　　　　　　 scroll_content.scrollTop = distance    
                    setTimeout(smoothUp, 10)
                } else {
                    scroll_content.scrollTop = total 
                }
            } 
        },

当然，上面的html代码部分只是做展示，每个人项目需求不同，稍加修改便可。
最后的效果图：