js实现右侧导航栏 无刷新定位模块内容在屏幕中心显示方法

点击右侧导航栏名称 定位对应的模块内容在屏幕中心显示

 html代码

<template>
    <div class="box">
		<div class="box1">
		    000
        </div>
        <div class="box2">
            123
        </div>
        <div class="box3">
            456
        </div>
        <div class="box4">
            789
        </div>
	</div>
</template>

js代码

 handleJumpTab(val) {
     window.document.getElementsByClassName(val)[0].scrollIntoView(true);
 },

css代码

<style lang='scss' scoped>
    .box{
        padding: 400px 0;
    }
    .box1{
        width: 500px;height: 500px;background: red;
    }
    .box2{
        width: 500px;height: 500px;background: orange;
    }
    .box3{
        width: 500px;height: 500px;background: green;
    }
    .box4{
        width: 500px;height: 500px;background: yellow;
    }
    .table{
        position: fixed;
        right: 40px;
        top: 40%;
        div {
            background: pink;
            margin: 10px 0;
            cursor: pointer;
            padding: 10px 20px;
        }
    }
</style>