tab切换实现锚点动画定位

一、需求demo示例

 二、html部分代码，css自己书写

<div class="tableul">
        <div class="tableli"
             v-for="(item, index) in allMenuList"
             :key="index"
             :class="{tableliActive:tabNum==item.id}"
             @click="signTable(item.id)"
        >
            {{item.name}}
        </div>
</div> //表头tab代码

<div id="scrollBox" class="scrollBoxContent">
     <div v-for="(val, index) in allMenuList" :key="val.id" class="scrollItem">
        <p class="itemTitle">{{ val.name }}</p>
        <ul class="itemList">
             <li v-for="item in val.children" :key="item.id" class="itemListLi">
                 <img :src="item.url" v-if="item.url">
                 <div v-html="item.content" v-if="item.content"></div>
             </li>
         </ul>
    </div>
</div>  //tab内容代码

三、js逻辑部分

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                tabNum:"1",
                allMenuList:[
                    {
                        id:"1",
                        name:"注意事项",
                        children:[
                            {
                                content:'<div>的回复框上反馈是否打开手铐分类算法楼上的分类</br>算法来上课局势发生了附件数据发送旅客健身房的考虑发生了附件里是</div><img src="http://file.cdn.openpubu.com/20200219/60a7e8aaa555019c3b9ac9b432c54791.jpg"/>',

                            }
                        ]
                    },
                    {
                        id:"2",
                        name:"医保流程",
                        children:[
                            {
                                url:"http://file.cdn.openpubu.com/20191021/ada057d54daea9ee0dc006c56e6af355.png",

                            }
                        ]
                    },
                    {
                        id:"3",
                        name:"常规流程",
                        children:[
                            {
                                url:"http://file.cdn.openpubu.com/20191021/653b113dfae9d8896589316260c63c8e.png",
                            }
                        ]
                    },
                    {
                        id:"4",
                        name:"零花钱操作流程",
                        children:[
                            {

                                url:"http://file.cdn.openpubu.com/20200219/60a7e8aaa555019c3b9ac9b432c54791.jpg",
                            }
                        ]
                    }
                ]
            }
        },
        mounted:function(){
            // 获取滚动dom元素
            var _this = this
            var scrollItems = document.getElementsByClassName('scrollItem')
            var screenHeight = window.screen.height
            var flag = false
            window.addEventListener('scroll',function (e) {
                var e = e || window.event
                var scrollHeight = $(window).scrollTop();
                for (var i = scrollItems.length-1 ; i >= 0; i--) {
                    var differHeight = scrollItems[i].offsetTop - scrollItems[0].offsetTop;
                    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
                    var differFlag = scrollHeight >= differHeight
                        if (differFlag) {
                            _this.tabNum = i+1;
                            break;
                        }
                    }
                var finallyPicHeight = scrollItems[scrollItems.length-1].offsetHeight
                if(finallyPicHeight < screenHeight && !flag){
                    var parentBox=document.getElementById("scrollBox");
                    var newBoxHeight = screenHeight-finallyPicHeight-scrollItems[0].offsetTop
                    var newBox=document.createElement("div");
                    newBox.style.background = '#ffffff';
                    newBox.style.height = newBoxHeight+'px';
                    newBox.innerHTML=""
                    parentBox.appendChild(newBox);
                    flag = true;
                    return;
                }
            })
        },
        methods: {
            signTable:function(value) {
                var scrollItems = document.getElementsByClassName("scrollItem");
                for (var i = 0; i < scrollItems.length; i++) {
                    if (value  == i+1) {
                        $('html,body').animate({scrollTop:scrollItems[i].offsetTop-scrollItems[0].offsetTop},666);
                    }
                }
            },
        }
    })
</script>