使div滑动到父元素的指定位置

最近有一个项目需求，需要在界面顶部竖排显示菜单栏，菜单栏底部显示内容，点击菜单栏中的选项，让底部显示的相应内容置于内容显示区的顶部，而不是页面的顶部，这样做的好处是可以不遮盖菜单栏，方便用户操作。

说一下实现思路：

总体思路：采用js原生的Scroll实现。

因为是在vue中实现，引入jquey显得很笨重，所以直接用原生写，代码也是非常简单。

第一步，计算父元素div到顶部的高度

第二步，计算不同子元素到达顶部的高度，可以通过一个方法传入子元素id值 

第三步，给父元素的滚动条距离顶部的位置值赋值，形成动态滚动效果

 

说明一下：父元素需要设置overflow-y:scroll,设置界面最外层div的overflow-y:hidden,否则外层也会跟着一起滑动，就不能起到只滑动固定div的效果了。

代码实现如下：

method:{
   ScrollMethod(childid){
         var partotop = document.getElementById('parentid').offsetTop;  //父元素到页面顶部距离
         var distance = document.getElementById(childid).offsetTop;  //子元素到页面顶部的距离
         console.log("子元素距离顶部的距离是---"+distance);
         var scrolldis = document.getElementById('parentid').scrollTop=distance - partotop;
        console.log('父容器可滚动距离---'+scrolldis);
    }
}

亲自动手实践一下吧，亲测效果非常好，完美的解决了我的问题，也不用担心兼容性的问题。