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
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);
});
USE :
$('html, body').animate({scrollTop: $(document).height()}, 'slow');
UPDATE
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');
});
$("#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.
try this instead.
$('.button').click(function(e){
e.preventDefault();
$('.expander').slideToggle();
$("html, body").animate({ scrollTop: $(document).height() }, 2000);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.