Jquery 滚屏

  
    

     
   #scrollDiv
   
     
        {
   
     
            width: 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
   
     ;
 }