一个简单的上下滚动效果

哎..刚接触js，这东西怨念我好久了...今天写了一个最最最最最最基础的东西，结果不出意料的没成果，求解原因<!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=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/css.css" />
</head>
<body>
<!--按钮上下滚动-->
<div><a href="#" class="a11" onclick="movetop()"></a></div>
<div class="blank5"></div>
<div class="scroll">
    <div class="scroll2" id="scroll2">
        <p>伴随着改革开放的不断推进，中国在知识产权领域已制定4部专门法，颁布19部行政法规，全面履行与贸易有关的知识产权协定，形成了涵盖专利、商标、版权、植物新品种保护等各个领域，与国际通行规则相协调，比较完备的知识产权法律法规体系，奠定了行政执法与司法保护相结合的法律基础。进入新世纪以来，中国制定实施国家知识</p>
        <p>伴随着改革开放的不断推进，中国在知识产权领域已制定4部专门法，颁布19部行政法规，全面履行与贸易有关的知识产权协定，形成了涵盖专利、商标、版权、植物新品种保护等各个领域，与国际通行规则相协调，比较完备的知识产权法律法规体系，奠定了行政执法与司法保护相结合的法律基础。进入新世纪以来，中国制定实施国家知识</p>
        <p>伴随着改革开放的不断推进，中国在知识产权领域已制定4部专门法，颁布19部行政法规，全面履行与贸易有关的知识产权协定，形成了涵盖专利、商标、版权、植物新品种保护等各个领域，与国际通行规则相协调，比较完备的知识产权法律法规体系，奠定了行政执法与司法保护相结合的法律基础。进入新世纪以来，中国制定实施国家知识</p>
    </div>
</div>
<div class="blank5"></div>
<div><a href="#" class="a12" onclick="movebottom"></a></div>
<script type="text/javascript">
var nSpeed=10;
function movetop(){
    var oDiv=document.getElementById('scroll2');
    oDiv.style.top=oDiv.offsetTop+nSpeed+'xp';
}
function movebottom(){
    var oDiv=document.getElementById('scroll2');
    oDiv.style.top=oDiv.offsetTop-nSpeed+'xp';
}
</script>
<!--按钮上下滚动结束-->
</body>
</html>我想要的效果是，点击上下两个按钮，实现文章滚动

解决方案 »

  1.   

    首先  像素是“xp”还是“px”？
      

  2.   

    <div><a href="#" class="a12" onclick="movebottom"></a></div>
    lz  快被你整死了  你这要会有效果。表示很无语。lz还是好好检查一下自己的代码吧。
      

  3.   

    哈哈..原来是自己粗心了
    我刚刚把代码改了下<script type="text/javascript">
    var nSpeed=10;
    function movetop(){
    var oDiv=document.getElementById('scroll2');
    oDiv.style.top=oDiv.offsetTop-nSpeed+'px';
    window.setTimeout(movetop,30);
    }
    function movebottom(){
    var oDiv=document.getElementById('scroll2');
    oDiv.style.top=oDiv.offsetTop+nSpeed+'px';
    window.setTimeout(movebottom,30);
    }
    </script>可是这样写鼠标一点就一直滚动了，
    应该如何写，才能实现，鼠标点击上，滚动，鼠标抬起滚动停止在当前位置，向下同
    我的是新手，还往大大们指点
      

  4.   

    这里有!
    http://www.ok22.org/art_detail.aspx?id=114
    js文字上下滚动+左右滚动兼容FF/IE（有停顿效果）
      

  5.   

    <!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>CSDN 社区中心</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="/PointForum/ui/styles/list.css" />
    <script type="text/javascript" src="http://counter.csdn.net/a/js/AreaCounter.js"></script>
    </head>
    <body onload="announcementScroll()">
        <script type="text/javascript">
         try { document.domain = "csdn.net"; } catch (ex) { }
         function delDomain(url) {
         return ("" + url).toLowerCase().replace(/http:\/\/[^\/]+/, "");
         }
         function iframeAutoFit() {
         if (parent) {
         var iframes = parent.document.getElementsByTagName("iframe");
         for (var i = 0; i < iframes.length; i++) {
         if (delDomain(iframes[i].src) == delDomain(location.href)) {
         iframes[i].style.height = "26px";
         }
         }
         }
         }
         if (document.attachEvent) window.attachEvent("onload", iframeAutoFit);
         else window.addEventListener('load', iframeAutoFit, false);
        </script><div class="chal">
    <div class="conts" style="border:0;">
    <div id="ann" onmouseover="annstop = 1" onmouseout="annstop = 0">
    <div id="annbody" style="border-top:0px;">
    <ul id="annbodylis">
    <script src="http://ping.csdn.net/rsscache.aspx?rssurl=http://temp.csdn.net/Feed.aspx?Column=60389665-6496-440d-943d-6b1bb6d44971&amp;count=6&amp;area=223" type="text/javascript"></script>
    </ul>
    </div>
    </div> </div>
    </div>
    <script type="text/javascript">
    function $(id) {
    return document.getElementById(id);
    } var lis = $("annbodylis").getElementsByTagName("li");
    for (var i = 0; i < lis.length; i++) {
    switch (i % 3) {
    case 1:
    lis[i].className = "cen";
    break;
    case 2:
    lis[i].className = "rig";
    break;
    }
    } /*文字广告滚屏JS*/
    var anndelay = 3000;
    var annst = 0;
    var annstop = 0;
    var annrowcount = 0;
    var anncount = 0;
    var annrows = new Array();
    var annstatus;
    function announcementScroll() {
    var annlis = $('annbody').getElementsByTagName("li");
    if (annstop) {
    annst = setTimeout('announcementScroll()', anndelay);
    return;
    }
    if (!annst) {
    var lasttop = -1;
    for (i = 0; i < annlis.length; i++) { if (lasttop != annlis[i].offsetTop) {
    if (lasttop == -1) {
    lasttop = 0;
    }
    annrows[annrowcount] = annlis[i].offsetTop - lasttop;
    annrowcount++;
    }
    lasttop = annlis[i].offsetTop;
    } if (annrows.length == 1) {
    $('ann').onmouseover = $('ann').onmouseout = null;
    } else {
    annrows[annrowcount] = annrows[1];
    $('annbodylis').innerHTML += $('annbodylis').innerHTML;
    annst = setTimeout('announcementScroll()', anndelay);
    }
    annrowcount = 1;
    return;
    } if (annrowcount >= annrows.length) {
    $('annbody').scrollTop = 0;
    annrowcount = 1;
    annst = setTimeout('announcementScroll()', anndelay);
    } else {
    anncount = 0;
    announcementScrollnext(annrows[annrowcount]);
    }
    } function announcementScrollnext(time) {
    $('annbody').scrollTop++;
    anncount++;
    if (anncount != time) {
    annst = setTimeout('announcementScrollnext(' + time + ')', 10);
    } else {
    annrowcount++;
    annst = setTimeout('announcementScroll()', anndelay);
    }
    }
    </script>
    </body>
    </html>
    运行下这个看，是否是你要想的效果?