상하 스크롤 입니다.

 

펌 : http://blog.naver.com/lch752/40046035463 원본 입니다.

 

실행시 화면

 

scroll_2.png

 

<html>
<head>
</head>
 
<body>
 <script language="javascript">
  var curr = 1;
 
  function hide_all() {
   document.all.tr1.style.display="none";
   document.all.tr2.style.display="none";
   document.all.tr3.style.display="none";
   document.all.tr4.style.display="none";
   document.all.tr5.style.display="none";
   document.all.tr6.style.display="none";
   document.all.tr7.style.display="none";
   document.all.tr8.style.display="none";
   document.all.tr9.style.display="none";
   document.all.tr10.style.display="none";
  }
 
  function show() {
   var curr_copy = curr;
 
   var obj1 = eval("document.all.tr"+curr_copy++);
   var obj2 = eval("document.all.tr"+curr_copy++);
   var obj3 = eval("document.all.tr"+curr_copy++);
   var obj4 = eval("document.all.tr"+curr_copy++);
   var obj5 = eval("document.all.tr"+curr_copy);
  
   obj1.style.display="";
   obj2.style.display="";
   obj3.style.display="";
   obj4.style.display="";
   obj5.style.display="";
  }
 
  function upp() {
  
   if(curr!=1){
    hide_all();
    curr--;
    show();
   }
  
  }
 
  function dnn() {
   if(curr!=6){
    hide_all();
    curr++;
    show();
   }
  }
 </script>
 <a href="javascript:upp();">위로</a>
 <table>
  <tr id="tr1" style="display:;">
   <td>1
   </td>
  </tr>
  <tr id="tr2" style="display:;">
   <td>2
   </td>
  </tr>
  <tr id="tr3" style="display:;">
   <td>3
   </td>
  </tr>
  <tr id="tr4" style="display:;">
   <td>4
   </td>
  </tr>
  <tr id="tr5" style="display:;">
   <td>5
   </td>
  </tr>
  <tr id="tr6" style="display:none;">
   <td>6
   </td>
  </tr>
  <tr id="tr7" style="display:none;">
   <td>7
   </td>
  </tr>
  <tr id="tr8" style="display:none;">
   <td>8
   </td>
  </tr>
  <tr id="tr9" style="display:none;">
   <td>9
   </td>
  </tr>
  <tr id="tr10" style="display:none;">
   <td>10
   </td>
  </tr>
 </table>
 <a href="javascript:dnn();">아래로</a>
</body>
</html>

이 게시물을