菜鸟写的网页滚动效果

2020-01-27 13:43:40

字体：大中小

来源：转载

供稿：网友

菜鸟写的网页滚动效果，点击元素后，网页向上滚动，初学者所写，还不是很完善，兼容性也不到位，先分享给JS爱好者，期待与你共同交流。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>菜鸟写的网页滚动效果</title><style type="text/css">*{	margin:0;	padding:0;}.page960{	width:960px;	margin:auto;}.mainDiv{	width:960px;	margin:auto;}.div_menu{	float:left;	display:inline;	width:95px;	border:1px solid #ccc;	border-right:none;	cursor:pointer;}.div_menu span{	width:93px;	height:60px;	display:block;	line-height:60px;	text-align:center;	margin:1px;	background:#9FC;}.main_content{	float:left;	display:inline;	width:860px;	border:1px solid #ccc;	height:800px;	margin-bottom:12px;}</style></head><body><div class="page960" style="height:200px;">head</div><div class="mainDiv">	<div class="div_menu">    	<span onclick="divMove(0)">1</span>        <span onclick="divMove(1)">2</span>        <span onclick="divMove(2)">3</span>    </div>    <div class="main_content">test1</div></div><div class="mainDiv">	<div class="div_menu">    	<span onclick="divMove(0)">1</span>        <span onclick="divMove(1)">2</span>        <span onclick="divMove(2)">3</span>    </div>    <div class="main_content">test2</div></div><div class="mainDiv">	<div class="div_menu">    	<span onclick="divMove(0)">1</span>        <span onclick="divMove(1)">2</span>        <span onclick="divMove(2)">3</span>    </div>    <div class="main_content">test3</div></div><script type="text/javascript">var currentpos,timer;var myDiv=new Array();var j=0;var k=0;var n=0;var timer=null;var speed=0;allDiv=document.getElementsByTagName("div");/*假如是ie8或者是火狐*/if(navigator.appVersion.indexOf("7.0")==-1&&navigator.appVersion.indexOf("6.0")==-1){	for(j=0;j<allDiv.length;j++)	{		if(allDiv[j].className=="div_menu")		{			myDiv[n]=allDiv[j];			n++;		}	}}else{	for(j=0;j<allDiv.length;j++)	{		if(allDiv[j].className=="mainDiv")		{			myDiv[n]=allDiv[j];			n++;		}	}}function divMove(m){	sc();	//因为要符合标准页面包含了DOCTYPE所以用document.body.scrollTop无	currentPos=document.documentElement.scrollTop;	for(k in myDiv)	{		if(m==k)		{			myElement=myDiv[k];			//window.scroll(0,myDiv[k].offsetTop);		}	}	if(myElement.offsetTop>currentPos)	{		moveDown();	}	if(myElement.offsetTop<currentPos)	{		moveUp();	}}//向下移动function moveDown(){ 	timer=setInterval("scrollDown()",10);}function scrollDown() {	if(Math.ceil(currentPos)>=myElement.offsetTop)	{		sc();		timer=null;		speed=0;	}	else	{		speed=(myElement.offsetTop-currentPos)/15;		currentPos=currentPos+speed;		window.scroll(0,currentPos); 		}}//向上移动function moveUp(){ 	timer=setInterval("scrollUp()",10);} function scrollUp() {	if(Math.round(currentPos)<=myElement.offsetTop)	{		sc();		timer=null;		speed=0;	}	else	{		speed=(myElement.offsetTop-currentPos)/15;		currentPos=currentPos+speed;		window.scroll(0,currentPos); 		}}//停止移动function sc(){	clearInterval(timer); 	timer=null;}</script></body></html>

上一篇：网页上的下拉缓冲JS效果代码

下一篇：Js仿微博插入话题功能