jQuery - 在slideDown上滚动到div的底部

时间:2013-09-03 20:12:15

标签: javascript jquery html css

当用户点击链接滑动div时,我试图滚动到div的底部。

我尝试过使用scrollTo和animate

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

但没有任何反应

继承人小提琴

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

4 个答案:

答案 0 :(得分:8)

演示:http://jsfiddle.net/CLzfW/4/

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

只需使用.expander高度即可。
如果您需要变量,可以执行此操作: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);
});

答案 1 :(得分:2)

DEMO

使用:

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

更新

Scrolling the div Demo

使用这个, 诀窍是scrollHeightHow 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

答案 2 :(得分:1)

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

您正在使用类名而不是ID。您必须滚动到一个唯一元素。

答案 3 :(得分:1)

试试这个。

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

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