Jquery 滚屏

#scrollDiv
        {
             835px;
            height: 230px;
            min-height: 25px;
            line-height: 25px;
            overflow: hidden;
        }

<div id="scrollDiv">
　　<ul>
      <li>这是第1行</li>    
　　　 <li>这是第2行</li> 
          <li>这是第3行</li>     
          <li>这是第4行</li>
　　　  <li>这是第5行</li> 
　　　  <li>这是第6行</li>
            <li>这是第7行</li>                                                                            
　　</ul>
</div>
<img src="../images/uparrow.png" width="24" height="22" id="btn1" alt=""/>
<img src="../images/downarrow.png" width="24" height="22" id="btn2" alt=""/>

Jquery代码：

(function ($) {
    $.fn.extend({
        Scroll: function (opt, callback) {
            //参数初始化
            if (!opt) var opt = {};
            var _btnUp = $("#" + opt.up); //Shawphy:向上按钮
            var _btnDown = $("#" + opt.down); //Shawphy:向下按钮
            var _this = this.eq(0).find("ul:first");
            var lineH = _this.find("li:first").height(), //设置行高
                line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), 
　　　　　　　　　 //每次滚动的行数，默认为一屏，即父容器高度
                speed = opt.speed ? parseInt(opt.speed, 10) : 500; //卷动速度，数值越大，速度越慢（毫秒）
            var upHeight = 0 - line * lineH;

            //向上翻页函数
            var scrollUp = function () {
                _btnUp.unbind("click", scrollUp); //Shawphy:取消向上按钮的函数绑定
                _this.animate({
                    marginTop: upHeight
                }, speed, function () {
                    for (i = 1; i <= line; i++) {
                        _this.find("li:first").appendTo(_this);
                    }
                    _this.css({ marginTop: 0 });
                    _btnUp.bind("click", scrollUp); //Shawphy:绑定向上按钮的点击事件
                });
            }

            //向下翻页函数
            var scrollDown = function () {
                _btnDown.unbind("click", scrollDown);
                for (i = 1; i <= line; i++) {
                    _this.find("li:last").show().prependTo(_this);
                }
                _this.css({ marginTop: upHeight });
                _this.animate({
                    marginTop: 0
                }, speed, function () {
                    _btnDown.bind("click", scrollDown);
                });
            }

            //鼠标事件绑定
            _btnUp.css("cursor", "pointer").click(scrollUp);
            _btnDown.css("cursor", "pointer").click(scrollDown);
        }
    })
})(jQuery);

另外一种解决方案：直接使用javascript的scrolltop 

HTML代码相同

function down() {
            var o = document.getElementById("scrollDiv");
            var n1 = parseInt(o.scrollTop);
            var n2 = parseInt(o.clientHeight);
            var n3 = parseInt(o.scrollHeight);
//            if (n1 + n2 == n3) {
//                alert('end!');
//            } else {
                o.scrollTop = n1 + 66;
            //}
        }

        function up() {
            var o = document.getElementById("scrollDiv");
            var n1 = parseInt(o.scrollTop);
            var n2 = parseInt(o.clientHeight);
            var n3 = parseInt(o.scrollHeight);
            o.scrollTop -= 66;
        }