Добавьте плавную вертикальную прокрутку в пределах определенного переполнения div, с помощью кнопок

Question

У меня есть div на моем сайте, который заполнен блогами из RSS-канала. В верхней и нижней части расположены кнопки для прокрутки вверх и вниз в div (поскольку у него скрытое переполнение для дополнительных блогов). Мне интересно, что мне нужно добавить, чтобы сделать это гладким прокруткой, а не просто щелчком по щелчку.

HTML:

<div class="col-md-4 hidden-xs hidden-sm" id="blogSection"> 
    <div class="row" id="scrollUp"> 
     <button id="downClick"><i class="fa fa-chevron-up fa-2x"></i></button> 
    </div> 
    <!-- ------------ BLOGS RSS FEED POPULATED ------------- -->  
    <div id="homeBlogs"> 
     <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fblogs.msbcollege.edu%2Ffeed%2F&chan=y&desc=250>1&targ=y&utf=y" charset="UTF-8" type="text/javascript"></script> 
     <noscript> 
     <a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fblogs.msbcollege.edu%2Ffeed%2F&chan=y&desc=250>1&targ=y&utf=y&html=y">View RSS feed</a> 
     </noscript> 
    </div> 
    <!-- END RSS POPULATION ---------- --> 
    <div class="row" id="scrollDown"> 
     <button id="upClick"><i class="fa fa-chevron-down fa-2x"></i></button> 
    </div> 
</div> 

JS:

$(document).ready(function() { 


$("#upClick").click(function() { 
    $('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() + 200); 
    }); 

    $("#downClick").click(function() { 
    $('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() - 200); 
    }); 

}); 

Answer 1

Поскольку вы используете JQuery, вы, вероятно, ищет JQuery анимации библиотеки:

var scrollTime = 2000; 

$('#upClick').click(function() { 
    $('#homeBlogs').animate({ 
     scrollTop: $('#homeBlogs').scrollTop() + 200 
    }, scrollTime); 
}); 


$('#downClick').click(function() { 
    $('#homeBlogs').animate({ 
     scrollTop: $('#homeBlogs').scrollTop() - 200 
    }, scrollTime); 
});