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>

我尝试了多个选项，用于在jsery中向下滚动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)

感谢MDLHUT on CodePen

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

1 个答案: