使用向上和向下按钮向上或向下滚动表格


Scroll table upwards or downwards using up and down button

我想为我的主页创建一个横幅滚动功能。我不太确定在这里使用哪种编程语言。我想编写类似于以下内容的代码:http://www.squidfaceandthemeddler.com/。但我希望页脚在用户滚动表格时保持在同一位置。有可能得到那个结果吗?我创建了一个简单的表格和 2 张图像供用户点击

这是我的表代码:

<div id="banner" style="height:750px; width:600px; overflow:scroll;" > 
    <table width="750px" height="600px"> 
    <tr> 
    <td><a href="sale_1.php"><img src="banner1.png"/></a></td> 
    </tr> 
    </table> 
    <table width="750px" height="600px"> 
    <tr> 
    <td><a href="sale_2.php"><img src="banner2.png"/></a></td> 
    </tr> 
    </table> 
    <table width="750px" height="600px"> 
    <tr> 
    <td><a href="sale_3.php"><img src="banner3.png"/></a></td> 
    </tr> 
    </table> 
</div> 

这是用于滚动的向上和向下按钮:

<table width="750px" height="30px"> 
<tr> 
<td align="right"><img src="images/up_arrow.png"/><img src="images/down_arrow.png"/></td> 
</tr> 
</table> 

如果你把内容放在两个div标签中,你可以使用CSS来剪辑外部div 并通过编写其 CSS "top" 值来"滚动"内部div,因此:

<html><head><style>
#contents{ 
 position: relative; top: 0; left: 0; width: 100px; height: auto;}
 #scrollable{ overflow: hidden; width: 100px; height: 100px; border: 1px
solid black;
 }
</style>
<script>
var t = 0;
function up()
{
 t += 10;
 with(document.getElementById("contents"))
 {
   if (t > 0)
    t = 0;
 if(style)
    style.top = t + "px";
 else
  setAttribute("style", "top: " + t + "px");
}
}
function down()
{
 t -= 10;
with(document.getElementById("contents"))
{
  if(t < -clientHeight)
      t = -clientHeight;
  if(style)
       style.top = t + "px";
  else
       setAttribute("style", "top: " + t + "px");
  }
 }
</script></head>
   <body><table><tr><td><a href="javascript:void(0)" onclick="up()">up</a></td>
   <td rowspan="2"><div id="scrollable">
     <div id="contents">scrolling content scrolling content scrolling content
        scrolling content scrolling content scrolling content scrolling content
        scrolling content scrolling content scrolling content scrolling content
   </div></div> 
       </td></tr><tr><td>
     <a href="javascript:void(0)" onclick="down()">down</a></td></tr></table>
    </body></html>

借助此编辑代码

看看 jquery scrolltop: http://api.jquery.com/scrollTop/。我会将表格宽度固定到一定高度,就像您已经做的那样,然后:

$('#buttonUpID').click(function () {
    var currentScrollTop = $('body').scrollTop();
    $('body').scrollTop(currentScrollTop - 600);
});
$('#buttonDownID').click(function () {
    var currentScrollTop = $('body').scrollTop();
    $('body').scrollTop(currentScrollTop + 600);
});