scroll楼层跳跃

最新推荐文章于 2021-07-07 10:56:14 发布

zuo_zuo_blog

最新推荐文章于 2021-07-07 10:56:14 发布

阅读量135

点赞数

分类专栏：ＪａｖａＳｃｒｉｐｔ

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/103927362

版权

ＪａｖａＳｃｒｉｐｔ专栏收录该内容

105 篇文章 2 订阅

订阅专栏

<!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;
				text-align: center;
				line-height: 50px;
				border: 1px solid #000000;
				cursor: pointer;
				margin-top: -1px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<ol>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ol>
		
		<script>
			//scroll封装
			function scroll(){
				if(window.pageYOffset!==undefined){
					var json={
						"top":window.pageYOffset,
						"left":window.pageXOffset
					}
					return json;
				}else if(document.compatMode=="CSS1Compat"){
					var json={
						"top":document.documentElement.scrollTop,
						"left":window.documentElement.scrollLeft
					}
					return json;
				}else{
					var json={
						"top":document.body.scrollTop,
						"left":window.body.scrollLeft
					}
					return json;
				}
			}
			
			var ul=document.getElementsByTagName("ul")[0];
			var ol=document.getElementsByTagName("ol")[0];
			var ulLiArr=ul.children;
			var olLiArr=ol.children;
			var timer=null;
			var target=0;
			var leader=0;
			var arrColor=["pink","blue","green","red","orange"];
			for(var i=0;i<arrColor.length;i++){
				ulLiArr[i].style.backgroundColor=arrColor[i];
				olLiArr[i].style.backgroundColor=arrColor[i];
				olLiArr[i].index = i;
				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);
					   }
					},20)
				}
			}
			
			
			window.onscroll=function(){
				leader=scroll().top;
			}
			
			
		</script>
	</body>
</html>

zuo_zuo_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
scroll楼层跳跃

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body,html{ ...
复制链接

扫一扫

专栏目录