vue 实现侧边菜单点击，内容滚动至可视区

1、显示图：

 2、模板内容：

<div class="page-container">
    <div class="sidebar-menu">
        <div class="sidebar-menu-inner">
            <nav class="sidebar-nav">
                <img class="sidebar-logo" src="../assets/logo.png">
                <span class="sidebar-title">xxx科技</span>
            </nav>
            <ul id="main-menu" class="main-menu">
                <li class="">
                    <a href="javascript:;" data-id="go" @click="menuTab" >
                        <i class="iconfont bg-tuijian"></i>
                        <span class="title">go</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;" data-id="php" @click="menuTab">
                        <i class="iconfont bg-dynamic"></i>
                        <span class="title">php</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;" data-id="java" @click="menuTab">
                        <i class="iconfont bg-dynamic"></i>
                        <span class="title">java</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-content">
        <h4 class="" id="go"><i class="iconfont bg-notice" style="margin-right: 7px;"></i>go</h4>
        <div class="list">
            <div class="col">
                <div class="widget" onclick="window.open('https://baidu.com/', '_blank')" title="go">
                    <img class="img-circle" src="../../public/image/list4.jpg">
                    <div class="user-text">
                        <p class="user-name overflowClipOne"><strong>对象</strong></p>
                        <p class="overflowClipTwo">形象、生动、富有想象力</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="widget" onclick="window.open('https://baidu.com/', '_blank')" title="go">
                    <img class="img-circle" src="../../public/image/list4.jpg">
                    <div class="user-text">
                        <p class="user-name overflowClipOne"><strong>链表</strong></p>
                        <p class="overflowClipTwo">空间、长度，数组还是双向链表</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="widget" onclick="window.open('https://baidu.com/', '_blank')" title="go">
                    <img class="img-circle" src="../../public/image/list4.jpg">
                    <div class="user-text">
                        <p class="user-name overflowClipOne"><strong>数组</strong></p>
                        <p class="overflowClipTwo">a、长度是确定的。数组一旦被创建，它的大小就是不可以改变的。b、其元素必须是相同类型，不允许出现混合类型。c、数组类型可以是任何数据类型，包括基本数据类型和引用类型。</p>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="" id="php"><i class="iconfont bg-notice" style="margin-right: 7px;"></i>php</h4>
        <div class="list">...</div>
        <h4 class="" id="java"><i class="iconfont bg-notice" style="margin-right: 7px;"></i>java</h4>
        <div class="list">...</div>
    </div>
</div>
<style>
	@import url("../../public/fonts/iconfont.css");
	.navs .nav-item:first-child {opacity: 0;}
	.page-container{display: flex;font-size: 13px;line-height: 1.5;}
	/* 左侧菜单 */
	.page-container .sidebar-menu{flex: none;width:280px;position: relative;z-index: 335;background: #2c2e2f;}
	.sidebar-menu-inner{position:fixed;left: 0; top:0;z-index: 335;width:inherit;background: #2c2e2f;color:#fff;}
	.sidebar-menu .sidebar-nav{text-align:center;line-height: 39px;color:bisque;font-size: 20px;margin-top:10px;margin-bottom: 10px;vertical-align: middle;}
	.sidebar-menu .sidebar-nav .sidebar-logo{width:36px;height:36px;vertical-align: middle;}
	.sidebar-menu .sidebar-nav .sidebar-title{margin-left:6px;vertical-align: middle;}
	.sidebar-menu .main-menu{list-style: none;padding-left: 40px; padding-right: 40px;margin-top: 20px; margin-bottom: 20px;}
	.sidebar-menu .main-menu a{display: block;text-decoration: none;color:#979898; padding: 9px 6px;}
	.sidebar-menu .main-menu a>i { display: inline-block; margin-right: 10px;}
	/* 右侧内容 */
	.page-container .main-content{flex:1; position: relative;z-index: 1;padding: 30px;padding-bottom: 0;vertical-align: top;word-break: break-word; width: 100%;transition: opacity 100ms ease-in-out;background: #f9f9f9;}
	.main-content .col{display:inline-block;width:180px;margin-right: 30px;}
	.main-content .col:first-child{margin-left: 0;}
	.main-content .widget{display:flex;position: relative;background: #fff;margin-bottom: 30px; padding: 15px;}
	.main-content .img-circle{width:39px;height: 39px;border-radius: 50%;margin-top:10px;margin-right:10px;}
	.main-content .user-text{display:inline-block;}
	.main-content .overflowClipOne{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
	.main-content .overflowClipTwo{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
</style>

3、script

<script>
export default{
    data(){
	    return{
		    screenWidth: document.body.clientWidth,//浏览器宽度
	    }
    },
	mounted: function () {
        const that = this
		that.scrollAnimation(0,0)
        // 监听浏览器宽度
		window.addEventListener("resize", function() {
		  return (() => {
			window.screenWidth= document.body.clientWidth;
			that.screenWidth= window.screenWidth;
		  })();
		});
	},
	methods:{
		menuTab(e){
			const toTop = document.getElementById(e.currentTarget.getAttributeNode("data-id").value).offsetTop // 对应内容
		    const currentY = document.documentElement.scrollTop || document.body.scrollTop
			this.scrollAnimation(currentY,toTop)
		},
        // 这个方法是从网上拿来用的
		scrollAnimation(currentY, targetY){
			// 计算需要移动的距离
			let needScrollTop = targetY - currentY
			let _currentY = currentY
			setTimeout(() => {
				// 一次调用滑动帧数，每次调用会不一样
				const dist = Math.ceil(needScrollTop / 10)
				_currentY += dist
				window.scrollTo(_currentY, currentY)
				// 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
				if (needScrollTop > 10 || needScrollTop < -10) {
					this.scrollAnimation(_currentY, targetY)
				} else {
					window.scrollTo(_currentY, targetY)
				}
			}, 3)
		}
	},
    watch:{
        // 监听属性
		screenWidth: {
			immediate: true,
			handler(newValue) {
				if(newValue >= 980){
					this.isMenuTab = true
				}else{
					this.isMenuTab = false
				}
			}
		}
	}
}
</script>

如果是按钮的切换的就看这篇：JS 实现Tab标签页切换的效果