通过按钮在特定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); 
});