javascript - Animate my scrollTop function in this code -

i have function scroll through div. function @ point want except 1 thing. want scrolling happen animated. how can implement in code?

$(function() {        var ele = $('#scroller');       var scroll = 20;        $('.scroller-btn-up').click(function() {         // scroll element             ele.scrolltop(ele.scrolltop() - scroll);       });        $('.scroller-btn-down').click(function() {         // scroll element down         ele.scrolltop(ele.scrolltop() + scroll);       });        $('.scroller-btn-up, .scroller-btn-down').bind({         click: function(e) {           // prevent default click action           e.preventdefault();         }       });      }); 

$(function() {    var ele = $('#scroller');   var scroll = 20;    $('.scroller-btn-up').click(function() {     // scroll element         ele.animate({scrolltop : ele.scrolltop() - scroll});   });    $('.scroller-btn-down').click(function() {     // scroll element down     ele.animate({scrolltop : ele.scrolltop() + scroll});   });    $('.scroller-btn-up, .scroller-btn-down').bind({     click: function(e) {       // prevent default click action       e.preventdefault();     }   });  });