通过网页上的链接实现页面上下滚动展示效果，点击选中的链接选项内容始终显示在网页顶部。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>页面点击链接上下翻页滚动展示特效_武鸣人</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.page960{
width:860px;
margin:50px 50px 50px 20px;
}
.mainDiv{
width:860px;
margin:50px 50px 50px 20px;
}
.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:760px;
border:1px solid #ccc;
height:800px;
margin-bottom:12px;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="page960" style="height:50px;">头部</div>
<div class="mainDiv">
<div class="div_menu">
<span onclick="divMove(0)">第一选项</span>
<span onclick="divMove(1)">第二选项</span>
<span onclick="divMove(2)">第三选项</span>
</div>
<div class="main_content">第一层浮动内容<br />努力是一种状态，与年龄无关，越努力越幸运，越自律越优秀！</div>
</div>
<div class="mainDiv">
<div class="div_menu">
<span onclick="divMove(0)">第一选项</span>
<span onclick="divMove(1)">第二选项</span>
<span onclick="divMove(2)">第三选项</span>
</div>
<div class="main_content">第二层浮动内容<br />努力是一种状态，与年龄无关，越努力越幸运，越自律越优秀！</div>
</div>
<div class="mainDiv">
<div class="div_menu">
<span onclick="divMove(0)">第一选项</span>
<span onclick="divMove(1)">第二选项</span>
<span onclick="divMove(2)">第三选项</span>
</div>
<div class="main_content">第三层浮动内容<br />努力是一种状态，与年龄无关，越努力越幸运，越自律越优秀！</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++;
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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();
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//向下移动
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);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//向上移动
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);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//停止移动
function sc(){
clearInterval(timer);
timer=null;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处