Question

我有一个具有css选项溢出的div：hidden。 div的内容更大。所以我想添加两个按钮来向上和向下滚动内容。

首先我试过了：

&XXXX;

但是div没有滚动。所以我尝试了scrollTo插件，但它也不会滚动。

也许有人可以看看我的jsfiddle： https://jsfiddle.net/vun5trf6/1/

谢谢！

Answer 1

qc_content是代码中的类，而不是ID。片段是固定的。但是，我还删除了你正在使用的所有库：jQuery单独在animate中有一个内置滚动函数，由简单调用scrollTop作为动画属性触发。

$('#scrollDown').click(function () {
    $('.qc_content').animate({scrollTop: '+=156px'});
    /* ^ that's how you get your class */
});
$('#scrollUp').click(function () {
    $('.qc_content').animate({scrollTop: '-=156px'});
});

div.qc_content{
  height:30px;
  width:507px;
  overflow:hidden;
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="qc_content">
<!-- ^ thats a class, not an id. -->
<div class="qc_content_wrapper"><table class="subtab_list" id="scrolllist"><tbody><tr id="r1"><td class="c3s1">A</td><td class="c3s2">2015-07-24</td><td class="c3s3">-</td></tr><tr id="r2"><td class="c3s1">B</td></tr><tr id="r3"><td class="c3s1">C</td><td class="c3s2">2015-07-24</td><td class="c3s3">-</td></tr><tr id="r4"><td class="c3s1">D</td></tr><tr id="r5"><td class="c3s1">E</td><td class="c3s2">2015-07-24</td><td class="c3s3">-</td></tr><tr id="r6"><td class="c3s1">E</td></tr><tr id="r7"><td class="c3s1">F</td><td class="c3s2">2015-07-31</td><td class="c3s3">-</td></tr><tr id="r8"><td class="c3s1">G</td></tr><tr id="r9"><td class="c3s1">H</td><td class="c3s2">2015-07-24</td><td class="c3s3">-</td></tr><tr id="r10"><td class="c3s1">I</td></tr></tbody></table></div></div>

<div class="qc_subnavigation">
  <div class="button1">
					
  </div>
  <div class="button2">
					
  </div>
  <div class="button3">
					
  </div>
  <div class="button4">
					
  </div>
  <div class="button5">
    <p id="scrollUp">ScrollUP</p>
  </div>
  <div class="button6">
    <p id="scrollDown">ScrollDown</p>
  </div>
</div>

scrollTo插件在点击时不会按预期滚动

1 个答案: