实用的按钮控制内容有序上下滚动特效，每次按固定高度来滚动，根据自己的需求来修改套用即可。
<!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:0px;
padding:0px;
}
body{
text-align:center;
font-size:12px;
line-height:16px;
font-family:"微软雅黑";
padding-top:20px;
background:#CCC;
}
a:link{
color:#900;
text-decoration:none;
}
a:visited{
color:#900;
text-decoration:none;
}
a:hover{
color:#900;
text-decoration:underline;
}
ul li{
list-style-type:none;
}
div#container{
width:300px;
margin:50px 50px 50px 50px;
background:#FFF;
}
div#up_www_wuming_ren a,div#down_wuming_ren a{
display:block;
padding:10px 0px;
}
ol#scrolllist{
width:300px;
height:332px;
border-top:1px solid #666;
border-bottom:1px solid #666;
text-align:left;
overflow:hidden;
}
ol#scrolllist li{
padding:10px 0px 10px 10px;
border-bottom:1px dotted #666;
}
</style>
<script type="text/javascript">
var functionSwitch=true,listNum=0,marginTop=0;
function scrollList(mode){
if(mode==undefined||!functionSwitch){return;}
if(mode==1&&listNum==0){functionSwitch = true;return;}
functionSwitch = false;
var onceMove = 3;
var mainScroll = document.getElementById("scrolllist");
var allList = mainScroll.getElementsByTagName("li");
var allHeight = 0;
for(var a=0;a<allList.length;a++){allHeight+=allList[a].offsetHeight;}
if(mode==0&&marginTop<=0-(allHeight-mainScroll.offsetHeight)){functionSwitch = true;return;}
var moveBox = allList[0];
var moveHeight = allList[listNum].offsetHeight;
if(mode==1){var fuckNum = marginTop+moveHeight;}
else if(mode==0){var fuckNum = marginTop-moveHeight;}
var scrolling = window.setInterval(function(){
if(mode==1){
marginTop += onceMove;
if(marginTop>=fuckNum){
marginTop=fuckNum;
window.clearInterval(scrolling);
functionSwitch = true;
}
}
else if(mode==0){
marginTop -= onceMove;
if(marginTop<=fuckNum){
marginTop=fuckNum;
window.clearInterval(scrolling);
functionSwitch = true;
}
}
moveBox.style.marginTop = marginTop+"px";
},10);
if(mode==0){listNum++;}
else if(mode==1){listNum--;}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</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 id="container">
<div id="up_www_wuming_ren"><a href="javascript:" onclick="scrollList(0)" title="向上滚动">向上滚动</a></div>
<ol id="scrolllist">
<li>武鸣人一号标题</li>
<li>武鸣人二号标题</li>
<li>武鸣人三号标题</li>
<li>武鸣人四号标题</li>
<li>武鸣人五号标题</li>
<li>武鸣人六号标题</li>
<li>武鸣人七号标题</li>
<li>武鸣人八号标题</li>
<li>武鸣人九号标题</li>
<li>武鸣人十号标题</li>
<li>武鸣人十一号标题</li>
<li>武鸣人十二号标题</li>
<li>武鸣人十三号标题</li>
<li>武鸣人十四号标题</li>
<li>武鸣人十五号标题</li>
<li>武鸣人十六号标题</li>
<li>武鸣人十七号标题</li>
<li>武鸣人十八号标题</li>
<li>武鸣人十九号标题</li>
<li>武鸣人二十号标题</li>
<li>武鸣人二十一号标题</li>
<li>武鸣人二十二号标题</li>
<li>武鸣人二十三号标题</li>
<li>武鸣人二十四号标题</li>
</ol>
<div id="down_wuming_ren"><a href="javascript:" onclick="scrollList(1)" title="向下滚动">向下滚动</a></div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处