scrollTo плагин не прокручивается, как ожидалось, при щелчке

Question

У меня есть div, у которого есть опция css: переполнение: скрыто. Содержимое div больше. Поэтому мне нравится добавлять две кнопки для прокрутки содержимого сверху и снизу.

Сначала я попробовал:

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

Но ДИВ техника его подводит свиток. Поэтому я попробовал плагин scrollTo, но он тоже не прокручивается.

Может быть кто-то может хава взгляд на мой jsfiddle: https://jsfiddle.net/vun5trf6/1/

Спасибо!

Answer 1

qc_contentкласс в вашем коде, а не идентификатор. Фрагмент фиксирован. Однако я также удалил все библиотеки, которые вы использовали: только 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>