菜鸟写的网页滚动效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

菜鸟写的网页滚动效果

分类

网站常用

描述

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