이 코드에서 내 scrollTop 함수에 애니메이션 적용

Question

div를 스크롤하는이 함수가 있습니다. 이 시점의 기능은 내가 한 가지만 제외하고는 원하는 것을 정확하게 수행합니다. 나는 스크롤이 생기를 원한다. 이 코드에서 어떻게 구현할 수 있습니까?

$(function() { 

     var ele = $('#scroller'); 
     var scroll = 20; 

     $('.scroller-btn-up').click(function() { 
     // Scroll the element up  
     ele.scrollTop(ele.scrollTop() - scroll); 
     }); 

     $('.scroller-btn-down').click(function() { 
     // Scroll the element down 
     ele.scrollTop(ele.scrollTop() + scroll); 
     }); 

     $('.scroller-btn-up, .scroller-btn-down').bind({ 
     click: function(e) { 
      // Prevent the default click action 
      e.preventDefault(); 
     } 
     }); 

    }); 

Answer 1

$(function() { 

    var ele = $('#scroller'); 
    var scroll = 20; 

    $('.scroller-btn-up').click(function() { 
    // Scroll the element up  
    ele.animate({scrollTop : ele.scrollTop() - scroll}); 
    }); 

    $('.scroller-btn-down').click(function() { 
    // Scroll the element down 
    ele.animate({scrollTop : ele.scrollTop() + scroll}); 
    }); 

    $('.scroller-btn-up, .scroller-btn-down').bind({ 
    click: function(e) { 
     // Prevent the default click action 
     e.preventDefault(); 
    } 
    }); 

});