Scroll to bottom of div

Question

I am creating a chat using Ajax requests and I m trying to get messages div to scroll to the bottom without much luck  I am wrapping everything in this div   scroll       height 400px      overflow scroll     Is there a way to keep it scrolled to the bottom by default using JS  Is there a way to keep it scrolled to the bottom after an ajax request

User · Answer

using jQuery animate       DebugContainer   stop   animate     scrollTop      DebugContainer   0  scrollHeight    800

User · Answer

You can use the Element scrollTo   method  It can be animated using the built-in browser OS animation  so it s super smooth   x000D   x000D  function scrollToBottom         const scrollContainer   document getElementById  container        scrollContainer scrollTo           top  scrollContainer scrollHeight          left  0          behavior   smooth                initialize dummy content const scrollContainer   document getElementById  container    const numCards   100  let contentInnerHtml       for  let i 0  i lt numCards  i        contentInnerHtml      lt div class  card mb-2  gt  lt div class  card-body  gt Card   i   1  lt  div gt  lt  div gt      scrollContainer innerHTML   contentInnerHtml  x000D   overflow-y-scroll     overflow-y  scroll    x000D   lt link href  https   cdn jsdelivr net npm bootstrap 4 5 3 dist css bootstrap min css  rel  stylesheet   gt    lt div class  d-flex flex-column vh-100  gt     lt div id  container  class  overflow-y-scroll flex-grow-1  gt  lt  div gt     lt div gt       lt button class  btn btn-primary  onclick  scrollToBottom    gt Scroll to bottom lt  button gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Here s what I use on my site   var objDiv   document getElementById  your div    objDiv scrollTop   objDiv scrollHeight

User · Answer

Found this really helpful  thank you   For the Angular 1 X folks out there    angular module  myApp   controller  myController      scope     document     function  scope   document         var overflowScrollElement    document 0  getElementById  your overflow scroll div        overflowScrollElement 0  scrollTop   overflowScrollElement 0  scrollHeight               Just because the wrapping in jQuery elements versus HTML DOM elements gets a little confusing with angular     Also for a chat application  I found making this assignment after your chats were loaded to be useful  you also might need to slap on short timeout as well

User · Answer

My Scenario  I had an list of string  in which I had to append a string given by a user and scroll to the end of the list automatically  I had fixed height of the display of the list  after which it should overflow   I tried  Jeremy Ruten s answer  it worked  but it was scrolling to the  n-1 th element  If anybody is facing this type of issue  you can use setTimeOut   method workaround  You need to modify the code to below   setTimeout      gt        var objDiv   document getElementById  div id        objDiv scrollTop   objDiv scrollHeight    0    Here is the StcakBlitz link I have created which shows the problem and its solution   https   stackblitz com edit angular-ivy-x9esw8

User · Answer

Scroll to the last element inside the div   myDiv scrollTop   myDiv lastChild offsetTop

User · Answer

Set the distance from the top of the scrollable element to be the total height of the element   const element   this shadowRoot getElementById  my-scrollable-div   element scrollTop   element scrollHeight

User · Answer

small addendum  scrolls only  if last line is already visible  if scrolled a tiny bit  leaves the content where it is  attention  not tested with different font sizes  this may need some adjustments inside     comparison     var objDiv   document getElementById id   var doScroll objDiv scrollTop gt   objDiv scrollHeight-objDiv clientHeight                          add new content to div         id   append  new line at end lt br gt        this is jquery      doScroll is true  if we the bottom line is already visible if  doScroll  objDiv scrollTop   objDiv scrollHeight

User · Answer

Scroll to the last element inside the div   myDiv scrollTop   myDiv lastChild offsetTop

User · Answer

Like you  I m building a chat app and want the most recent message to scroll into view  This ultimately worked well for me    get the div that contains all the messages let div   document getElementById  message-container       make the last element  a message  to scroll into view  smoothly  div lastElementChild scrollIntoView   behavior   smooth

User · Answer

Sometimes the most simple is the best solution  I do not know if this will help  it helped me to scroll it were ever I wanted too  The higher the  y   is the more down it scrolls and of course  0  means top  so there for example  1000  could be bottom  or  2000  or  3000  and so on  depending how long your page is  This usually works in a button with onclick or onmouseover   window scrollTo x 0 y 150

User · Answer

Javascript or jquery   var scroll   document getElementById  messages       scroll scrollTop   scroll scrollHeight     scroll animate  scrollTop  scroll scrollHeight      Css     messages          height  100         overflow  auto

User · Answer

Found this really helpful  thank you   For the Angular 1 X folks out there    angular module  myApp   controller  myController      scope     document     function  scope   document         var overflowScrollElement    document 0  getElementById  your overflow scroll div        overflowScrollElement 0  scrollTop   overflowScrollElement 0  scrollHeight               Just because the wrapping in jQuery elements versus HTML DOM elements gets a little confusing with angular     Also for a chat application  I found making this assignment after your chats were loaded to be useful  you also might need to slap on short timeout as well

User · Answer

You can use the Element scrollTo   method  It can be animated using the built-in browser OS animation  so it s super smooth   x000D   x000D  function scrollToBottom         const scrollContainer   document getElementById  container        scrollContainer scrollTo           top  scrollContainer scrollHeight          left  0          behavior   smooth                initialize dummy content const scrollContainer   document getElementById  container    const numCards   100  let contentInnerHtml       for  let i 0  i lt numCards  i        contentInnerHtml      lt div class  card mb-2  gt  lt div class  card-body  gt Card   i   1  lt  div gt  lt  div gt      scrollContainer innerHTML   contentInnerHtml  x000D   overflow-y-scroll     overflow-y  scroll    x000D   lt link href  https   cdn jsdelivr net npm bootstrap 4 5 3 dist css bootstrap min css  rel  stylesheet   gt    lt div class  d-flex flex-column vh-100  gt     lt div id  container  class  overflow-y-scroll flex-grow-1  gt  lt  div gt     lt div gt       lt button class  btn btn-primary  onclick  scrollToBottom    gt Scroll to bottom lt  button gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Using jQuery  scrollTop is used to set the vertical position of scollbar for any given element  there is also a nice jquery scrollTo plugin used to scroll with animation and different options  demos   var myDiv       div id   get 0   myDiv scrollTop   myDiv scrollHeight    if you want to use jQuery s animate method to add animation while scrolling down  check the following snippet   var myDiv       div id   get 0   myDiv animate       scrollTop  myDiv scrollHeight      500

User · Answer

I know this is an old question  but none of these solutions worked out for me  I ended up using offset   top to get the desired results  Here s what I used to gently scroll the screen down to the last message in my chat application       html  body   stop   animate        scrollTop      last-message   offset   top    2000     I hope this helps someone else

User · Answer

I have encountered the same problem  but with an additional constraint  I had no control over the code that appended new elements to the scroll container  None of the examples I found here allowed me to do just that  Here is the solution I ended up with    It uses Mutation Observers  https   developer mozilla org en-US docs Web API MutationObserver  which makes it usable only on modern browsers  though polyfills exist   So basically the code does just that    var scrollContainer   document getElementById  myId        Define the Mutation Observer var observer   new MutationObserver function mutations          Compute sum of the heights of added Nodes   var newNodesHeight   mutations reduce function sum  mutation          return sum      slice call mutation addedNodes           map function  node    return node scrollHeight    0              reduce function sum  height   return sum   height         0         Scroll to bottom if it was already scrolled to bottom   if  scrollContainer clientHeight   scrollContainer scrollTop   newNodesHeight   10  gt   scrollContainer scrollHeight        scrollContainer scrollTop   scrollContainer scrollHeight               Observe the DOM Element observer observe scrollContainer   childList  true      I made a fiddle to demonstrate the concept    https   jsfiddle net j17r4bnk

User · Answer

You can use the HTML DOM scrollIntoView Method like this   var element   document getElementById  scroll    element scrollIntoView

User · Answer

smooth scroll with Javascript   document getElementById  messages   scrollIntoView   behavior   smooth   block   end

User · Answer

small addendum  scrolls only  if last line is already visible  if scrolled a tiny bit  leaves the content where it is  attention  not tested with different font sizes  this may need some adjustments inside     comparison     var objDiv   document getElementById id   var doScroll objDiv scrollTop gt   objDiv scrollHeight-objDiv clientHeight                          add new content to div         id   append  new line at end lt br gt        this is jquery      doScroll is true  if we the bottom line is already visible if  doScroll  objDiv scrollTop   objDiv scrollHeight

User · Answer

If this is being done for scrolling to the bottom of chat window  do the following  The idea of scrolling to a particular div in the chat was the following   1  Each chat div consisting of Person  time and message is run in a for loop with class chatContentbox   2  querySelectorAll finds all such arrays  It could be 400 nodes  400 chats    3  go to the last one   4  scrollIntoView     let lastChatBox   document querySelectorAll   chatContentBox     lastChatBox   lastChatBox lastChatBox length-1    lastChatBox scrollIntoView

User · Answer

I use the difference between the Y coordinate of the first item div and the Y coordinate of the selected item div   Here is the JavaScript JQuery code and the html   x000D   x000D  function scrollTo event              In my proof of concept  I had a few  lt button gt s with value             attributes containing strings with id selector expressions            like   item1           let selectItem       event target  attr  value             let selectedDivTop   selectItem offset   top           let scrollingDiv   selectItem parent             let firstItem   scrollingDiv children  div   first            let firstItemTop   firstItem offset   top           let newScrollValue   selectedDivTop - firstItemTop          scrollingDiv scrollTop newScrollValue         x000D   lt div id  scrolling  style  height  2rem  overflow-y  scroll  gt     lt div id  item1  gt One lt  div gt     lt div id  item2  gt Two lt  div gt     lt div id  item3  gt Three lt  div gt     lt div id  item4  gt Four lt  div gt     lt div id  item5  gt Five lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

var mydiv       scroll    mydiv scrollTop mydiv prop  scrollHeight       Works from jQuery 1 6  https   api jquery com scrollTop   http   api jquery com prop

User · Answer

A very simple method to this is to set the scroll to to the height of the div   var myDiv   document getElementById  myDiv    window scrollTo 0  myDiv innerHeight

User · Answer

My Scenario  I had an list of string  in which I had to append a string given by a user and scroll to the end of the list automatically  I had fixed height of the display of the list  after which it should overflow   I tried  Jeremy Ruten s answer  it worked  but it was scrolling to the  n-1 th element  If anybody is facing this type of issue  you can use setTimeOut   method workaround  You need to modify the code to below   setTimeout      gt        var objDiv   document getElementById  div id        objDiv scrollTop   objDiv scrollHeight    0    Here is the StcakBlitz link I have created which shows the problem and its solution   https   stackblitz com edit angular-ivy-x9esw8

User · Answer

Newer method that works on all current browsers   this scrollIntoView false

User · Answer

If this is being done for scrolling to the bottom of chat window  do the following  The idea of scrolling to a particular div in the chat was the following   1  Each chat div consisting of Person  time and message is run in a for loop with class chatContentbox   2  querySelectorAll finds all such arrays  It could be 400 nodes  400 chats    3  go to the last one   4  scrollIntoView     let lastChatBox   document querySelectorAll   chatContentBox     lastChatBox   lastChatBox lastChatBox length-1    lastChatBox scrollIntoView

User · Answer

This will let you scroll all the way down regards the document height     html  body   animate  scrollTop   document  height     1000

User · Answer

Here s what I use on my site   var objDiv   document getElementById  your div    objDiv scrollTop   objDiv scrollHeight

User · Answer

If you don t want to rely on scrollHeight  the following code helps       scroll   scrollTop 1000000

User · Answer

You can use the HTML DOM scrollIntoView Method like this   var element   document getElementById  scroll    element scrollIntoView

User · Answer

Sometimes the most simple is the best solution  I do not know if this will help  it helped me to scroll it were ever I wanted too  The higher the  y   is the more down it scrolls and of course  0  means top  so there for example  1000  could be bottom  or  2000  or  3000  and so on  depending how long your page is  This usually works in a button with onclick or onmouseover   window scrollTo x 0 y 150

User · Answer

use    var element     element    var maxScrollTop   element 0  scrollHeight - element outerHeight    element scrollTop maxScrollTop     or check scroll to bottom        var element     element       var maxScrollTop   element 0  scrollHeight - element outerHeight        element on  scroll   function             if   element scrollTop    gt   maxScrollTop                 alert  scroll to bottom

User · Answer

You can also  using jQuery  attach an animation to html body of the document via      html body   animate  scrollTop     div-id   0  offsetTop   1000    which will result in a smooth scroll to the top of the div with id  div-id

User · Answer

Here s what I use on my site   var objDiv   document getElementById  your div    objDiv scrollTop   objDiv scrollHeight

User · Answer

Newer method that works on all current browsers   this scrollIntoView false

User · Answer

You can try the code below  function scrollToBottom  id       var div   document getElementById id      div scrollTop   div scrollHeight - div clientHeight     To perform a smooth scroll with JQuery  function scrollSmoothToBottom  id       var div   document getElementById id              id  animate         scrollTop  div scrollHeight - div clientHeight       500      See the example on JSFiddle Here s why this works   Ref  scrollTop  scrollHeight  clientHeight

User · Answer

On my Angular 6 application I just did this   postMessage          post functions here   let history   document getElementById  history     let interval       interval   setInterval function         history scrollTop   history scrollHeight     clearInterval interval       1      The clearInterval interval  function will stop the timer to allow manual scroll top   bottom

User · Answer

You can try the code below  function scrollToBottom  id       var div   document getElementById id      div scrollTop   div scrollHeight - div clientHeight     To perform a smooth scroll with JQuery  function scrollSmoothToBottom  id       var div   document getElementById id              id  animate         scrollTop  div scrollHeight - div clientHeight       500      See the example on JSFiddle Here s why this works   Ref  scrollTop  scrollHeight  clientHeight

User · Answer

Java Script   document getElementById  messages   scrollIntoView false    Scrolls to the last line of the content present

User · Answer

I have encountered the same problem  but with an additional constraint  I had no control over the code that appended new elements to the scroll container  None of the examples I found here allowed me to do just that  Here is the solution I ended up with    It uses Mutation Observers  https   developer mozilla org en-US docs Web API MutationObserver  which makes it usable only on modern browsers  though polyfills exist   So basically the code does just that    var scrollContainer   document getElementById  myId        Define the Mutation Observer var observer   new MutationObserver function mutations          Compute sum of the heights of added Nodes   var newNodesHeight   mutations reduce function sum  mutation          return sum      slice call mutation addedNodes           map function  node    return node scrollHeight    0              reduce function sum  height   return sum   height         0         Scroll to bottom if it was already scrolled to bottom   if  scrollContainer clientHeight   scrollContainer scrollTop   newNodesHeight   10  gt   scrollContainer scrollHeight        scrollContainer scrollTop   scrollContainer scrollHeight               Observe the DOM Element observer observe scrollContainer   childList  true      I made a fiddle to demonstrate the concept    https   jsfiddle net j17r4bnk

User · Answer

This will let you scroll all the way down regards the document height     html  body   animate  scrollTop   document  height     1000

User · Answer

Just as a bonus snippet  I m using angular and was trying to scroll a message thread to the bottom when a user selected different conversations with users  In order to make sure that the scroll works after the new data had been loaded into the div with the ng-repeat for messages  just wrap the scroll snippet in a timeout    timeout function        var messageThread   document getElementById  message-thread-div-id        messageThread scrollTop   messageThread scrollHeight    0    That will make sure that the scroll event is fired after the data has been inserted into the DOM

User · Answer

Just as a bonus snippet  I m using angular and was trying to scroll a message thread to the bottom when a user selected different conversations with users  In order to make sure that the scroll works after the new data had been loaded into the div with the ng-repeat for messages  just wrap the scroll snippet in a timeout    timeout function        var messageThread   document getElementById  message-thread-div-id        messageThread scrollTop   messageThread scrollHeight    0    That will make sure that the scroll event is fired after the data has been inserted into the DOM

User · Answer

If you don t want to rely on scrollHeight  the following code helps       scroll   scrollTop 1000000

User · Answer

alternative solution function scrollToBottom element      element scroll   top  element scrollHeight  behavior   smooth

User · Answer

using jQuery animate       DebugContainer   stop   animate     scrollTop      DebugContainer   0  scrollHeight    800

User · Answer

I use the difference between the Y coordinate of the first item div and the Y coordinate of the selected item div   Here is the JavaScript JQuery code and the html   x000D   x000D  function scrollTo event              In my proof of concept  I had a few  lt button gt s with value             attributes containing strings with id selector expressions            like   item1           let selectItem       event target  attr  value             let selectedDivTop   selectItem offset   top           let scrollingDiv   selectItem parent             let firstItem   scrollingDiv children  div   first            let firstItemTop   firstItem offset   top           let newScrollValue   selectedDivTop - firstItemTop          scrollingDiv scrollTop newScrollValue         x000D   lt div id  scrolling  style  height  2rem  overflow-y  scroll  gt     lt div id  item1  gt One lt  div gt     lt div id  item2  gt Two lt  div gt     lt div id  item3  gt Three lt  div gt     lt div id  item4  gt Four lt  div gt     lt div id  item5  gt Five lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

A very simple method to this is to set the scroll to to the height of the div   var myDiv   document getElementById  myDiv    window scrollTo 0  myDiv innerHeight

User · Answer

This is much easier if you re using jQuery scrollTop       mydiv   scrollTop     mydiv   0  scrollHeight

User · Answer

On my Angular 6 application I just did this   postMessage          post functions here   let history   document getElementById  history     let interval       interval   setInterval function         history scrollTop   history scrollHeight     clearInterval interval       1      The clearInterval interval  function will stop the timer to allow manual scroll top   bottom

User · Answer

I know this is an old question  but none of these solutions worked out for me  I ended up using offset   top to get the desired results  Here s what I used to gently scroll the screen down to the last message in my chat application       html  body   stop   animate        scrollTop      last-message   offset   top    2000     I hope this helps someone else

User · Answer

Using jQuery  scrollTop is used to set the vertical position of scollbar for any given element  there is also a nice jquery scrollTo plugin used to scroll with animation and different options  demos   var myDiv       div id   get 0   myDiv scrollTop   myDiv scrollHeight    if you want to use jQuery s animate method to add animation while scrolling down  check the following snippet   var myDiv       div id   get 0   myDiv animate       scrollTop  myDiv scrollHeight      500

User · Answer

use    var element     element    var maxScrollTop   element 0  scrollHeight - element outerHeight    element scrollTop maxScrollTop     or check scroll to bottom        var element     element       var maxScrollTop   element 0  scrollHeight - element outerHeight        element on  scroll   function             if   element scrollTop    gt   maxScrollTop                 alert  scroll to bottom

User · Answer

alternative solution function scrollToBottom element      element scroll   top  element scrollHeight  behavior   smooth

User · Answer

smooth scroll with Javascript   document getElementById  messages   scrollIntoView   behavior   smooth   block   end

User · Answer

Javascript or jquery   var scroll   document getElementById  messages       scroll scrollTop   scroll scrollHeight     scroll animate  scrollTop  scroll scrollHeight      Css     messages          height  100         overflow  auto

User · Answer

Set the distance from the top of the scrollable element to be the total height of the element   const element   this shadowRoot getElementById  my-scrollable-div   element scrollTop   element scrollHeight

User · Answer

var mydiv       scroll    mydiv scrollTop mydiv prop  scrollHeight       Works from jQuery 1 6  https   api jquery com scrollTop   http   api jquery com prop

User · Answer

Like you  I m building a chat app and want the most recent message to scroll into view  This ultimately worked well for me    get the div that contains all the messages let div   document getElementById  message-container       make the last element  a message  to scroll into view  smoothly  div lastElementChild scrollIntoView   behavior   smooth

User · Answer

Java Script   document getElementById  messages   scrollIntoView false    Scrolls to the last line of the content present

User · Answer

Here s what I use on my site   var objDiv   document getElementById  your div    objDiv scrollTop   objDiv scrollHeight

User · Answer

You can also  using jQuery  attach an animation to html body of the document via      html body   animate  scrollTop     div-id   0  offsetTop   1000    which will result in a smooth scroll to the top of the div with id  div-id

User · Answer

This is much easier if you re using jQuery scrollTop       mydiv   scrollTop     mydiv   0  scrollHeight

[javascript] Scroll to bottom of div?

Examples related to javascript

Examples related to html

Examples related to ajax

Examples related to chat