CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1502223
user1502223

Reputation: 645

jQuery - Scroll to bottom of div on slideDown

Im trying to scroll to the bottom of the div when the user clicks on a link to slide the div down.

I've tried using the scrollTo and animate 

$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);

but nothing happens

heres the fiddle

http://jsfiddle.net/CLzfW/29/

Upvotes: 6

Views: 21357

Answers (4)

Mina Gabriel
Mina Gabriel

Reputation: 25070

DEMO

USE : 

$('html, body').animate({scrollTop: $(document).height()}, 'slow');

UPDATE

Scrolling the div Demo

Use this , The trick is in scrollHeight see my answer here How do I get the “auto” height of a DIV

$('.button').click(function(e){
  e.preventDefault();
  $('.expander').slideToggle();
  $('.expander ').animate({scrollTop: $('.expander')[0].scrollHeight}, 'slow');
  $('html, body').animate({scrollTop: $(document).height()}, 'slow');
});

Scroll Based on div scroll Height

Upvotes: 2

mtt
mtt

Reputation: 1717

Demo: http://jsfiddle.net/CLzfW/4/

$('.button').click(function(e){
  e.preventDefault();
  $('.expander').slideToggle();
    $('html, body').animate({
        scrollTop: 1000
    }, 2000);
});

Just use your .expander height.
If you need this to be variable you can do this: http://jsfiddle.net/CLzfW/26/

var scroll_to = $('.expander').offset().top + $('.expander').height();
$('.button').click(function(e){
  e.preventDefault();
  $('.expander').slideToggle();
    $('html, body').animate({
        scrollTop: scroll_to
    }, 2000);
});

Upvotes: 8

Ronny K
Ronny K

Reputation: 3731

try this instead. 

  $('.button').click(function(e){
  e.preventDefault();
  $('.expander').slideToggle();
    $("html, body").animate({ scrollTop: $(document).height() }, 2000);
});

demo http://jsfiddle.net/CLzfW/17/

Upvotes: 1

Sualkcin
Sualkcin

Reputation: 506

$("#something").click(function() {
  $('html, body').animate({
     scrollTop: $("#element").offset().top
 }, 1000);
});

You are using a class name instead of an id. You must scroll to a unique element.

Upvotes: 1

Related Questions