用上下按钮／链接控制内容上下滚动问题，紧急求助，谢谢！！

通过上下按钮／链接控制内容上下滚动，具体内容是绝对定位的，点击上下控制按钮／链接让具体内容的style.top不断的递减／递增一个固定的值。
我自己做了一个测试页面，但达不到效果，目前测试的是上下控制按钮／链接的函数有问题，这个功能看起来简单，但我一直没多少思路和头绪。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>javascript demo</title>
<style type="text/css" media="screen">
html,body,h2,div,ul,li{ margin: 0; padding: 0; border: 0; list-style-type:none; font-size: 1em; }
body{ padding: 1em;  }
.wrapper{ margin: 1em auto; width: 400px;  }
.arrowUp,
.arrowBottom{ height:30px; line-height: 30px; cursor: pointer; text-align: center; background: #444; color: #eee; }
.inner{ margin: 8px 0; height: 100px; border:4px solid #eee; position:relative; overflow:hidden; }
.innerContent{ position: absolute; left: 0; top: 0; width: 100%; text-transform:capitalize;  }
.innerContent li { border-bottom: 1px solid #eee; }
.innerContent li h2{ height: 49px; line-height: 49px; color: #777; font-weight: 700; text-align: center; }
</style>
</head>
<body>
<div class="wrapper">
<div class="arrowUp" id="arrowU">up</div>
<div class="inner" id="innerData">
<div class="innerContent" id="contentData">
<ul>
<li><h2>apple</h2></li>
<li><h2>adobe</h2></li>
<li><h2>microsoft</h2></li>
<li><h2>ibm</h2></li>
<li><h2>hp</h2></li>
<li><h2>oracle</h2></li>
<li><h2>google</h2></li>
<li><h2>yahoo</h2></li>
<li><h2>sun</h2></li>
</ul>
</div>
</div>
<div class="arrowBottom" id="arrowB">bottom</div>
</div>
<script type="text/javascript">
//<![CDATA[
var arrowU=document.getElementById("arrowU");
var arrowB=document.getElementById("arrowB");
var innerData=document.getElementById("innerData");
var innerDataH=innerData.clientHeight;
var contentData=document.getElementById("contentData");
var contentDataLists=contentData.getElementsByTagName("li").length;
var i=2,col=1;
var cols=Math.ceil(contentDataLists/i);/*函数有问题*/
arrowU.onclick=function(){
var styleTop=contentData.offsetTop;
if(col<cols){
contentData.style.top=(styleTop-innerDataH)+"px";
col++;
alert(col);
}
else{
contentData.style.top=0+"px";
}
};arrowB.onclick=function(){
var styleTop=contentData.offsetTop;
if(col>cols){
contentData.style.top=(styleTop+innerDataH)+"px";
col--;
alert(col);
}
else{
contentData.style.top=contentData.clientHeight+"px";
}
};//]]>
</script>
</body>
</html>

解决方案 »

  1.   

    简洁版。<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>javascript demo</title>
    <style type="text/css" media="screen">
    html,body,h2,div,ul,li{ margin: 0; padding: 0; border: 0; list-style-type:none; font-size: 1em; }
    body{ padding: 1em;  }
    .wrapper{ margin: 1em auto; width: 400px;  }
    .arrowUp,
    .arrowBottom{ height:30px; line-height: 30px; cursor: pointer; text-align: center; background: #444; color: #eee; }
    .innerContent{width: 400px; text-transform:capitalize;margin:0 auto;height:200px;overflow:hidden;  }
    .innerContent li { border-bottom: 1px solid #eee; }
    .innerContent li h2{ height: 49px; line-height: 49px; color: #777; font-weight: 700; text-align: center; }
    </style>
    </head>
    <body>
    <div class="wrapper">
        <div class="arrowUp" id="arrowU" onclick="up();">up</div>
        <div class="innerContent" id="contentData">
            <ul>
            <li><h2>apple</h2></li>
            <li><h2>adobe</h2></li>
            <li><h2>microsoft</h2></li>
            <li><h2>ibm</h2></li>
            <li><h2>hp</h2></li>
            <li><h2>oracle</h2></li>
            <li><h2>google</h2></li>
            <li><h2>yahoo</h2></li>
            <li><h2>sun</h2></li>
            </ul>
        </div>
        <div class="arrowBottom" id="arrowB" onclick="down();">bottom</div>
    </div>
    <script>
    function $(el){
    return document.getElementById(el);
    }
    var cont=$("contentData");
    function down(){
    cont.scrollTop+=50;
    }
    function up(){
    cont.scrollTop-=50;
    }
    </script>
    </body>
    </html>
      

  2.   

    滚到边界就不能继续滚了。
    要继续再滚动的话得判断，换成负margin-top。那外面还得套那个层。我这写的把那个去掉了。
      

  3.   

    html结构是不变的，在此基础上如何实现一个完善的功能？？<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>javascript demo</title>
    <style type="text/css" media="screen">
    html,body,h2,div,ul,li{ margin: 0; padding: 0; border: 0; list-style-type:none; font-size: 1em; }
    body{ padding: 1em;  }
    .wrapper{ margin: 1em auto; width: 400px;  }
    .arrowUp,
    .arrowBottom{ height:30px; line-height: 30px; cursor: pointer; text-align: center; background: #444; color: #eee; }
    .inner{ margin: 8px 0; height: 100px; border:4px solid #eee; position:relative; overflow:hidden; }
    .innerContent{ position: absolute; left: 0; top: 0; width: 100%; text-transform:capitalize;  }
    .innerContent li { border-bottom: 1px solid #eee; }
    .innerContent li h2{ height: 49px; line-height: 49px; color: #777; font-weight: 700; text-align: center; }
    </style>
    </head>
    <body>
    <div class="wrapper">
    <div class="arrowUp" id="arrowU">up</div>
    <div class="inner" id="innerData">
    <div class="innerContent" id="contentData">
    <ul>
    <li><h2>apple</h2></li>
    <li><h2>adobe</h2></li>
    <li><h2>microsoft</h2></li>
    <li><h2>ibm</h2></li>
    <li><h2>hp</h2></li>
    <li><h2>oracle</h2></li>
    <li><h2>google</h2></li>
    <li><h2>yahoo</h2></li>
    <li><h2>sun</h2></li>
    </ul>
    </div>
    </div>
    <div class="arrowBottom" id="arrowB">bottom</div>
    </div>
    <script type="text/javascript">
    //<![CDATA[
    function $(el){
    return document.getElementById(el);
    }
    var arrowU=$("arrowU");
    var arrowB=$("arrowB");
    var innerData=$("innerData");
    var innerDataH=innerData.clientHeight;
    var contentData=$("contentData");
    var contentDataLists=contentData.getElementsByTagName("li").length;
    var i=2,col=1;
    var cols=Math.ceil(contentDataLists/i);arrowU.onclick=function(){
    /*html结构是不变的*/
    };
    arrowB.onclick=function(){
    /*html结构是不变的*/
    };
    //]]>
    </script>
    </body>
    </html>