CODEWITHSUNDEEP
javascriptjqueryjquery-animatescrolltop
Frank Kluytmans
Frank Kluytmans

Reputation: 543

Animate my scrollTop function in this code

I have this function to scroll through a div. The function at this point does exactly what I want it do except for one thing. I want the scrolling to happen animated. How can I implement this in this code?

$(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();
        }
      });

    });

Upvotes: 0

Views: 85

Answers (1)

Harry Bomrah
Harry Bomrah

Reputation: 1668

$(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();
    }
  });

});

Upvotes: 1

Related Questions