在这段代码中为我的 scrollTop 函数设置动画答案

【问题标题】：Animate my scrollTop function in this code在这段代码中为我的 scrollTop 函数设置动画
【发布时间】：2013-05-10 09:30:30
【问题描述】：

我有这个功能来滚动一个 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();
        }
      });

    });

【问题讨论】：

api.jquery.com/animate
我知道 jquery 的 animate 函数，但我无法在我的代码中实现它。

标签： javascript jquery jquery-animate scrolltop

【解决方案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();
    }
  });

});

【讨论】：