封装一个JS文件animate.js
//缓动动画function animate(obj , target) {//关闭定时器clearInterval(obj.timer);console.log("2222");obj.timer = setInterval(function(){//速度是距离的1/10var speed = (target - obj.offsetTop)/10;console.log(speed);//正值向右移动且向上取整speed = speed>0?Math.ceil(speed):Math.floor(speed);//console.log(speed);//广告上下移动obj.style.top = obj.offsetTop + speed + "px";//判断是否到达目标位置if(Math.abs(target - obj.offsetTop) < Math.abs(speed)){obj.style.top = target + "px";clearInterval(obj.timer);}},30);};//封装一个兼容的scroll().返回值是json，用scroll().top获取scrollTop，//scroll().left获取scrollLeftfunction scroll(){if(window.pageYOffset != null){ //ie9+ //因为pageXOffset默认是0，所以需要进行判断return{left : window.pageXOffset,top : window.pageYOffset}}else if(patMode === "CSS1Compat"){//标准浏览器，判断有没有声明DTDreturn {left : document.documentElement.scrollLeft,top : document.documentElement.scrollTop}}else{return {left : document.body.scrollLeft,top : document.body.scrollTop}}};
##两侧广告
两侧广告会跟随界面的移动而移动
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 400px;height: 2000px;margin: 0 auto;}.img1{position: absolute;top: 80px;left: 10px;}.img2{position: absolute;top: 80px;right: 10px;}</style><script type="text/javascript" src="js/animate.js"></script><script type="text/javascript">window.onload = function(){var img = document.getElementsByTagName("img");window.onscroll = function(){//获取被卷去的高度var val = scroll().top;console.log(val);//console.log("1111111");animate(img[0],val+80);animate(img[1],val+80);};};</script></head><body><img class="img1" src="img/side.png"/><img class="img2" src="img/side.png"/><div>阿斯蒂芬规划局快乐了；‘<br />阿斯蒂芬规划局快乐了；‘<br />阿斯蒂芬规划局快乐了；‘<br />。。。。。。</div></body></html>
##回到顶部小火箭
点击小火箭，回到顶部
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">img{position: fixed;right: 10px;bottom: 10px;display: none;cursor: pointer;}div{width: 300px;height: 2000px;margin: 20px auto;}</style><script type="text/javascript" src="js/animate.js"></script><script type="text/javascript">window.onload = function(){var img = document.getElementsByTagName("img")[0];window.onscroll = function(){//卷去距离大于300显示小火箭if(scroll().top > 200){img.style.display = "block";}else{img.style.display = "none";}leader = scroll().top;}//目标位置是顶部 (0,0)点var target = 0;//显示区域距离顶部的距离（显示区域位置var leader = 0;var timer;img.onclick = function(){clearInterval(timer);timer = setInterval(function(){//速度var speed = (target - leader)/10;speed = speed>0?Math.ceil(speed):Math.floor(speed);leader += speed;console.log(leader);window.scrollTo(0,leader);//window.scrollTo(0,0); //这样会没有缓动的效果//清除定时器if(leader === 0){clearInterval(timer);}},30);};};</script></head><body><img src="img/xiu.png"/><div>我是最顶端.....<br>阿斯蒂芬规划局快乐了；‘<br />阿斯蒂芬规划局快乐了；‘<br />阿斯蒂芬规划局快乐了；‘<br />阿斯蒂芬规划局快乐了；‘<br />阿斯蒂芬规划局快乐了；‘<br />阿斯蒂芬规划局快乐了；‘<br />阿斯蒂芬规划局快乐了；‘<br /></div></body></html>
##楼层跳跃
点击，跳转到相对应的部分
<!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;left: 30px;top: 100px;}ol li{width: 60px;height: 30px;border: solid 1px #000;line-height: 30px;text-align: center;cursor: pointer;}</style><script type="text/javascript" src="js/animate.js"></script><script type="text/javascript">window.onload = function(){//获取元素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;//给每个区域上色var colorArr = ["pink" , "orange" , "skyblue" , "red" , "yellow"];for(var i = 0 ;i<colorArr.length ; i++){ulLiArr[i].style.backgroundColor = colorArr[i];olLiArr[i].style.backgroundColor = colorArr[i];olLiArr[i].index = i;//循环绑定单击响应函数olLiArr[i].onclick = function(){//获取当前li的索引 得到它距离最顶端的距离target = ulLiArr[this.index].offsetTop;//清除定时器clearInterval(timer);timer = setInterval(function(){//跳到对应位置var speed = (target - leader)/10;speed = speed>0?Math.ceil(speed):Math.floor(speed);//滑动leader += speed;window.scrollTo( 0 , leader);//清除定时器if(Math.abs(target - leader) < Math.abs(speed)){window.scrollTo(0,target);clearInterval(timer);}},25);};}window.onscroll = function(){leader = scroll().top;}};</script></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></body></html>
