如何在jQuery中使用自动刷新自动滚动到底部

Question

I am using this jquery ajax to receive msg from the database. But when someone trying to send a msg then it's coming here but could not auto scroll to the bottom. Any idea?

  setTimeout(startRefresh,1000);
var myKeyVals = { some value };

        var saveData = $.ajax({
          type: 'POST',
          url: "https://example.php",
          data: myKeyVals,
          success: function(resultData) { 
            $("#chatwindow").html(resultData);
            //######################################
          }
      });
      saveData.error(function() { alert("Something went wrong"); });

Answer 1

You can try something using animate & scrollTop inside ajax success like:

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

 div {height: 900px; border:2px solid #333; padding:10px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mydiv1">DATA FOR SAMPLE 1</div> <div id="mydiv2">SAMPLE DATA</div> <div id="mydiv2">SAMPLE DATA</div> 

And to take care that new DOM elements are actually present before scrolling, you can try to add some setTimeout for few milliseconds and add this code inside it.

Answer 2

check this out: https://www.electrictoolbox.com/jquery-scroll-bottom/

The following Javascript will scroll the page to the bottom using jQuery:

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

Obviously you can change the animation speed ('slow' in the above example) to something else such as 'fast' or a numeric duration in milliseconds where the higher the number, the slower the animation.

To bind the scrolling function to a click done on an existing element in the page, do something like this, where #someID is the element's ID:

$(document).ready(function() {
    $('#someID').click(function(){
        $('html, body').animate({scrollTop:$(document).height()}, 'slow');
        return false;
    });
});

Answer 3

You can try this trick. See if this helps you:

$("html, body").animate({ scrollTop: $(document).height() }, 20000);
setTimeout(function() {
   location.reload();
},20000);