楼层跳跃

效果如下：

CSS部分

body, ol, ul {
	padding: 0px;
	margin: 0px;
}
body, html {
	height: 100%;
}
ul {
	list-style: none;
	height: 100%;
}
ul li {
	height: 100%;
	width: 100%;
	color: #fff;
}
ol {
	position: fixed;
	left: 15px;
	top: 200px;
	list-style: none;
}
ol li {
	height: 30px;
	width: 30px;
	margin: 10px;
	font: 400 14px/30px "simsun";
	text-align: center;
	color: #fff;
	border: 1px solid #ccc;
	cursor: pointer;
}

body部分

<ul>
	<li>第一部分</li>
	<li>第二部分</li>
	<li>第三部分</li>
	<li>第四部分</li>
	<li>第五部分</li>
</ul>
<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ol>
<script>
//0.获取相关事件
var ul = document.getElementsByTagName("ul")[0];
var ol = document.getElementsByTagName("ol")[0];
var ulArr = ul.children;
var olArr = ol.children;
var target = 0;
var leader = 0;
var timer = null;
//1.新建一个颜色数组，为两个列表绑定相同的颜色
var color = ["pink","blue","red","green","orange"];
for(var i=0; i<color.length; i++){
	ulArr[i].style.backgroundColor = color[i];
	olArr[i].style.backgroundColor = color[i];
	//2.为ol绑定事件
	olArr[i].index = i;
	olArr[i].onclick = function (){
		target = ulArr[this.index].offsetTop;
		//要用定时器，先去除原来的定时器
		clearInterval(timer);
		timer = setInterval(function(){
			//获取步长
			var step = (target-leader)/10;
			//二次处理步长
			step = step>0?Math.ceil(step):Math.floor(step);
			//缓动动画
			leader = leader+step;
			window.scrollTo(0,leader);
			//判断，防止抖动
			var val = target-leader;
			if(Math.abs(val)<Math.abs(step)){
				window.scrollTo(0,target);
				clearInterval(timer);
			}
		},25)
	}
}
//模拟获取当前位置
window.onscroll = function (){
	leader = scrollTop().top;
}
function scrollTop(){
	return{
		"top":document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset,
		"left":document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset
	}
}
</script>