父子、祖孙组件组件嵌套，父级容器监听了scroll事件：在子、孙子组建中点击相应的标题，定位到对应的位置，实现平滑滚动。
参考文章：https://blog.csdn.net/iceking66/article/details/78211213?locationnum=1&fps=1
一、在子组建中设置：
子组件页面设置如下： 菜单项：“topMenu” 为菜单数组 <button v-for="(item,index) in topMenu" :key="item.value" @click.native="jump(index)">{{item.name}}</button> <组件1 class=".textcss"></组件1> ..................... <组件n class=".textcss"></组件n> 在method中编写个方法 jump(index){ let jump = document.querySelecotor('.textcss'); let param = { index: index, jump: jump, }; this.$root.eventHub.$emit('scrollTo',param); }二、父组件中编写，滚动：
父组件中 如： <div ref="viewhome"></div>
在父组件的 mounted中编写如下： this.$root.eventHub.$on('scrollTo', (params)=>{ let _this = this; //这行必写 let jump = params.jump; let index = params.index; let total = jump[index].offsetTop; let distance = _this.$refs.viewhome.scrollTop; let step = total/50; if(total > distance){ smoothDown(); } else { let newTotal = distance - total; step = newTotal / 50; smoothUp(); } function smoothDown(){ if(distance < total){ distance += step; _this.$refs.viewhome.scrollTop = distance - 40; //减多少 需要根据页面调试 //如果 _this 变成 this 提示 $refs未定义 --》这就是 开头 let _this = this;的作用 // 这里通过$refs来操作dom来替代： document.body.scrollTop = distance 和 document.documentElement.scrollTop = distance setTimeout(smoothDown,10); }else{ _this.$refs.viewhome.scrollTop = total - 40; } } function smoothUp(){ if(distance > total){ distance -= step; _this.$refs.viewhome.scrollTop = distance - 20; setTimeout(smoothUp, 10); }else{ _this.$refs.viewhome.scrollTop = total - 20; } } })