MDL框架页面中的自动底部滚动div jquery

Question

我有关于使用MDL框架在div中滚动的问题

目标 是在4秒钟后滚动到div的底部

这是我的jQuery：

  $('#user-select').on('change', function() {
  $("html, body").delay(4000).animate({ scrollTop: $(document).height() }, 1000);});

我也试过这个：

 $('#user-select').on('change', function() {
setInterval(function() { $('#chat').animate({scrollTop: $('#chat').height()}, 1000); },4000);});

这是我的html：

 <div style="width:100%;" id="chat_box">
                    <div id="chat">

                </div>
                </div>

div的内容通过AJAX请求加载

最终代码如下所示：

   <div style="width:100%;" id="chat_box">
                        <div id="chat">
    <div class="bubble right">
            <div class="content">
    Test 1</div>

    </div>

        <div class="bubble left">
            <div class="content">
        Test 1
</div>
        </div>
     </div>
    </div>

我已经尝试过使用jquery在div中向下滚动的多个选项，但是它们都不起作用

非常感谢！！

Answer 1

我发现了如何：

jQuery的

  var scrollTo = function(top) {
      var content = $(".mdl-layout__content");
      var target = top ? 0 : $(".page-content").height();
      content.stop().animate({ scrollTop: target }, 3000);
    };

var scrollToTop = function() {
  scrollTo(true);
};

var scrollToBottom = function() {
  scrollTo(false);
};

并且比4秒后调用该函数

setTimeout(scrollToBottom, 4000)

感谢CodePen上的MDLHUT