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