<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery控制页面滚动 - www.plcxue.com</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<style type="text/css">
html,body{
margin:0;
padding:0;
height:100%;
width:100%;
}
html,body,input{
font-family:Helvetica,Arial,Sans-Serif;
font-size:16px;
}
div.slide{
width:100%;
height:100%;
overflow:hidden;
}
div.slideh1{
margin:0;
padding:0.5em;
}
div.slideul{
list-style:none;
margin:0;
padding:0;
}
div.slideli{
margin:0.5em;
padding:00.5em;
line-height:1.25em;
}
</style>
<scriptsrc="/ajaxjs/jquery1.3.2.js"type="text/
javascript"></script>
<script>
$(function(){
//判断是否有DOCTYPE声明，有与没有，scrollTop不一样
varscrollPos;
if(typeofdocument.compatMode!='undefined'&&document.compatMode!='BackCompat'){
scrollPos=document.documentElement;
} // www.osxue.com
elseif(typeofdocument.body!='undefined'){
scrollPos=document.body;
}
//给标题添加单击事件
$("h1").click(function(){
varnextH1=$(this).parent().next();
if(nextH1.length){//判断是否是最后一个
varnext_top=nextH1.offset().top;
$(scrollPos)
.animate({scrollTop:next_top},"slow");
}else{
varfirst_top=$("div.slide:first").offset().top;
$(scrollPos)
.animate({scrollTop:first_top},"slow");
}
});
});
</script>
</head>
<body>
<divclass="slide">
<h1>标号One无效果请刷新网页重试</h1>
<ul>
<li>OneOneOneOne</li>
<li>OneOneOneOne</li>
<li>OneOneOneOne</li>
</ul>
</div>
<divclass="slide">
<h1>标号Two</h1>
<ul>
<li>TwoTwoTwo</li>
<li>TwoTwoTwo</li>
<li>TwoTwoTwo</li>
</ul>
<divstyle="width:468px;margin:15pxauto;">
</div>
</div>
<divclass="slide">
<h1>标号Three</h1>
<ul>
<li>ThreeThreeThree.</li>
<li>ThreeThreeThree.</li>
<li>ThreeThreeThree.</li>
</ul>
</div>
</body>
</html>
