scrollTo插件不按预期点击滚动

Question

我有一个div有CSS选项溢出：隐藏。分部的内容更大。所以我想添加两个按钮来上下滚动内容。

首先我想：

$('#scrollUp').click(function() { $('#qc_content').animate({scrollTop: 200},300);}); 

但DIV didnt滚动。所以我试图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"> 
 
\t \t \t \t \t 
 
    </div> 
 
    <div class="button2"> 
 
\t \t \t \t \t 
 
    </div> 
 
    <div class="button3"> 
 
\t \t \t \t \t 
 
    </div> 
 
    <div class="button4"> 
 
\t \t \t \t \t 
 
    </div> 
 
    <div class="button5"> 
 
    <p id="scrollUp">ScrollUP</p> 
 
    </div> 
 
    <div class="button6"> 
 
    <p id="scrollDown">ScrollDown</p> 
 
    </div> 
 
</div>