将DIV的滚动条滚动到其子元素所在的位置

今天做个手机的页面，左侧栏目点击，右侧滚动到指定的位置，记录下： 

.page {
	max-width: 6.4rem;
	min-width: 3.2rem;
	margin: 0 auto;
	background-color: antiquewhite;
	display: flex;
	height: 100vh;
}
.lft {
	width: 2rem;
	overflow-y: auto;
	background-color: #ccc;
	box-sizing: border-box;
}
ul,li{ padding:0;margin:0;list-style:none}
.lft ul li {
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.24rem;
	list-style: none;
	text-align: center;
}
.lft ul li.active{
	background-color: #7FFFD4;
	color: #fff;
}
.rgt {
	flex: 1;
	overflow-y: auto;
	background-color: aquamarine;
}

<script type="text/javascript">
			$(function() {
				$('ul li').click(function() {
					var rgt = $('.rgt');
					var current = $(".cont .w").eq($(this).index()).offset().top-rgt.offset().top+rgt.scrollTop();
					$(".rgt").stop().animate({
					     scrollTop: current
					   },300);
					   
					$(this).addClass('active').siblings().removeClass();
				})
			})
		</script>

<div class="page">
			<div class="lft">
				<div style="height: 120vh;width: 100%;font-size: 0.18rem;">
					<ul>
						<li class="active">楼层1</li>
						<li>楼层2</li>
						<li>楼层3</li>
						<li>楼层4</li>
						<li>楼层5</li>
						<li>楼层6</li>
					</ul>
				</div>
			</div>
			<div class="rgt">
				<div style="width: 100%;font-size: 0.18rem;" class="cont">
					<div class="w" style="height: 5rem;">1</div>
					<div class="w" style="height: 5rem;">2</div>
					<div class="w" style="height: 5rem;">3</div>
					<div class="w" style="height: 5rem;">4</div>
					<div class="w" style="height: 5rem;">5</div>
					<div class="w" style="height: 5rem;">6</div>
				</div>
			</div>
		</div>

这样就能实现了。