目的：达到像各个大型购物网站一样的楼层跳跃
需求:点击ol中的li，屏幕滑动到对应的ul中li范围
思路：还是利用window.scrollTo();利用缓动动画原理实现屏幕滑动
<!DOCTYPE html><html><head><meta charset="utf-8"> ???<title></title><style type="text/css">*{ ???padding:0; ???margin: 0;}body,html{ ???height: 100%;}ul{ ???list-style: none; ???height: 100%;}ul li{ ???height:100%;}ol{ ???list-style: none; ???position: fixed; ???top: 80px; ???left: 50px;}ol li{ ???width: 50px; ???height: 50px; ???border:1px solid #000; ???cursor: pointer; ???text-align: center; ???line-height: 50px;}</style></head><body><ul><li>鞋子区域</li><li>袜子区域</li><li>裤子区域</li><li>裙子区域</li><li>帽子区域</li></ul><ol><li>鞋子</li><li>袜子</li><li>裤子</li><li>裙子</li><li>帽子</li></ol><script type="text/javascript" src=""></script><script type="text/javascript">//需求:点击ol中的li，屏幕滑动到对应的ul中li范围//思路：还是利用window.scrollTo();利用缓动动画原理实现屏幕滑动//步骤：//1.获取元素//2.指定ul和ol中的li的背景色，对应的li背景色相同//3.获取元素并绑定事件//利用缓动动画原理实现屏幕滑动//用scroll事件模拟盒子距离最顶端的距离//获取元素var ul =document.getElementsByTagName("ul")[0];var ol = document.getElementsByTagName("ol")[0];var ulLiArr = ul.children;var olLiArr = ol.children;var target = 0;var leader =0;var timer = null;//指定ul和ol中li的背景色，与对应的li背景色相同//设置一个数组，里面装颜色，然后指定的颜色给数组中的指定元素var arrColor = ["pink","blue","yellow","orange","green"];//利用for循环给两个数组的元素上色for (var i = 0; i < arrColor.length; i++) { ???//上色 ????ulLiArr[i].style.backgroundColor=arrColor[i]; ????olLiArr[i].style.backgroundColor=arrColor[i]; ????//属性绑定索引值 ????olLiArr[i].index = i; ????//循环绑定，为每一个li绑定点击事件 ????olLiArr[i].onclick = function(){ ????????//获取目标位置 ????????//获取索引值 ????????target = ulLiArr[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); ????????????//清除定时器 ????????????if (Math.abs(target-leader)<=Math.abs(step)) { ????????????????window.scrollTo(0,target); ????????????????clearInterval(timer); ????????????} ????????},25); ????}}//用scroll事件模拟盒子距离最顶端的距离window.onscroll = function(){ ???//每次屏幕滑动，把屏幕卷去的头部赋值给leader，模拟获取显示区域距离顶部的距离 ???leader = scroll().top;}</script></body></html>JS之楼层跳跃
原文地址：https://www.cnblogs.com/creazybeauty/p/8176751.html