Need to scroll to bottom whenever a new div is added at bottom

by

It has been asked before but I’m not sure that in this context

Here is an Example

Here is the code: 

$("button#add-row").on("click",function(){
    $("ul").append("<li>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</li>");
  var $doc = $('html,body');
    $doc.animate({scrollTop: $doc.height()}, 500);
});

As you can see $doc.animate({scrollTop: $doc.height()}, 500) the jQuery animate has property called scrollTop which its value (the height of the document) is setting the scroll position.

In the Example I’m calling it whenever a button is pushed but you can easily add it to your chat-bot response callback.

You should improve this by blocking new animation firing before the previous one has ended – But this is another topic.

$("button#add-row").on("click",function(){
	$("ul").append("<li>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</li>");
  var $doc = $('html,body');
	$doc.animate({scrollTop: $doc.height()}, 500);
});
ul {
  width:80%;
  margin:0;
}
li {
  padding:20px;
  border:1px solid black;
  margin:20px;
}
button {
  position:fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="add-row">
Add a new row
</button>
<ul>
  <li>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</li>
  <li>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</li>
  <li>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</li>
  <li>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</li>
  <li>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</li>
  <li>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</li>
  <li>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</li>
  <li>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</li>
  <li>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</li>
</ul>

More Related Contents:

  1. this in chained jquery functions
  2. When we using alert vs popup div tag? [closed]
  3. Javascript: How to force the user to click on select
  4. Converting a JS object to an array using jQuery
  5. How to detect DIV’s dimension changed?
  6. Difference between val() and text()
  7. Instead of using prefixes I want to ask site visitors to upgrade their browser
  8. Disable submit button on form submit
  9. URL Encode a string in jQuery for an AJAX request
  10. How to stop events bubbling in jQuery? [duplicate]
  11. How to show popup message like in Stack Overflow
  12. Get parent element of a selected text
  13. Calling a function on Bootstrap modal open
  14. Open Select using Javascript/jQuery?
  15. How can jQuery behave like an object and a function?
  16. input file to array javascript/jquery
  17. jQuery: How to traverse / Iterate over a list of object
  18. How to get an Array with jQuery, multiple with the same name
  19. Browser waits for ajax call to complete even after abort has been called (jQuery)
  20. Get value from text area [duplicate]
  21. How to scroll a select list with JavaScript or jQuery?
  22. How to upload string as file with jQuery or other js framework
  23. Rotate div text after clicking on button using jquery and css
  24. How to select all textareas and textboxes using jQuery?
  25. let user scrolling stop jquery animation of scrolltop?
  26. Hot to get incomplete datetime-local input values
  27. Prevent a link to reload page
  28. Do duplicate ID values screw up jQuery selectors?
  29. How to determine if the client is a touch device [duplicate]
  30. Can you have multiple lines in an element?

Leave a Comment