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

【问题标题】：jQuery - Scroll to bottom of div on slideDownjQuery - 在 slideDown 上滚动到 div 的底部
【发布时间】：2013-09-04 04:55:21
【问题描述】：

当用户单击链接以向下滑动 div 时，我试图滚动到 div 的底部。

我尝试过使用 scrollTo 和动画

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

但是什么都没发生

这是小提琴

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

演示：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);
});

【讨论】：

【解决方案2】：

DEMO

使用：

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

更新

Scrolling the div Demo

使用这个，诀窍在于scrollHeight 在这里查看我的答案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

【讨论】：

这会滚动到 div 的底部还是页面的底部？
页面如果你想滚动 div 替换 html, body 用你的 div 名称并传递 div 高度而不是文档高度
确保你设置了你的overflow-y:scroll并且你的div里也有一些东西
我尝试添加 div 类/ID，但似乎不起作用
虽然这实际上并没有滚动到 div 的底部......它只是滚动浏览 div 内的内容..我需要页面实际转到 DIV 的底部跨度>

【解决方案3】：

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

您使用的是类名而不是 id。您必须滚动到唯一的元素。

【讨论】：

【解决方案4】：

试试这个。

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

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

【讨论】：

这会转到浏览器页面的底部，而不是 div 的底部