Scroll to bottom of Div on page load jQuery

Question

I have a div on my page    lt div id  div1  style  overflow scroll overflow-x hidden max-height 200px   gt  lt  div gt    How can I make the div scroll to the bottom of the div   Not the page  just the DIV

User · Answer

All the answers that I can see here  including the currently  accepted  one  is actually wrong in that they set   scrollTop   scrollHeight   Whereas the correct approach is to set   scrollTop   scrollHeight - clientHeight   In other words       div1   scrollTop     div1   0  scrollHeight -     div1   0  clientHeight     Or animated       div1   animate     scrollTop      div1   0  scrollHeight -     div1   0  clientHeight    1000

User · Answer

for animate in jquery  version   2 0   var d       div1    d animate   scrollTop  d prop  scrollHeight      1000

User · Answer

You can use below code to scroll to bottom of div on page load     document  ready function         div   scrollTop    div   scrollHeight

User · Answer

You can check scrollHeight and clientHeight with scrollTop to scroll to bottom of div like code below    x000D   x000D      div   scroll function  event    x000D    if   parseInt     div   0  scrollHeight  - parseInt this clientHeight      parseInt     div   scrollTop      x000D      x000D      console log  this is scroll bottom of div    x000D      x000D     x000D      x000D   x000D   x000D

User · Answer

window  load function          html  body   animate   scrollTop    document  height      1000         This grabs the height of the page and scrolls it down once the window has loaded  Change the 1000 to whatever you need to do it faster slower once the page is ready

User · Answer

try this       div1   scrollTop      div1   height

User · Answer

Scroll window to the bottom of target div   function scrollToBottom id     div height         id  height      div offset         id  offset   top    window height     window  height         html body   animate       scrollTop  div offset-window height div height      slow       scrollToBottom  call div id

User · Answer

When page is load then scroll is max value    This is message box when user send message then always show latest chat in down so that scroll value is always is maxium        message   scrollTop     message   0  scrollHeight     see image

User · Answer

I m working in a legacy codebase trying to migrate to Vue   In my specific situation  scrollable div wrapped in a bootstrap modal   a v-if showed new content  which I wanted the page to scroll down to  In order to get this behaviour to work  I had to wait for vue to finish re-rendering  and then use jQuery to scroll to the bottom of the modal   So     this  nextTick function             thing   0  scrollTop       thing   0  scrollHeight

User · Answer

The other solutions here don t actually work for divs with lots of content -- it  maxes out  scrolling down to the height of the div  instead of the height of the content of the div    So they ll work  unless you have more than double the div s height in content inside of it   Here is the correct version       div1   scrollTop     div1   0  scrollHeight     or jQuery 1 6  version   var d       div1    d scrollTop d prop  scrollHeight       Or animated       div1   animate   scrollTop      div1   prop  scrollHeight     1000

User · Answer

None of these worked for me  I have a message system inside a web app that s similar to Facebook messenger and wanted the messages to appear at the bottom of a div   This worked a treat  basic Javascript   window onload function           var objDiv   document getElementById  MyDivElement         objDiv scrollTop   objDiv scrollHeight

User · Answer

UPDATE   see Mike Todd s solution for a complete answer         div1   animate   scrollTop      div1   height     1000     if you want it to be animated  over 1000 milliseconds        div1   scrollTop     div1   height      if you want it instantaneous

User · Answer

The following will work  Please note  0  and scrollHeight      myDiv   animate   scrollTop      myDiv   0  scrollHeight    1000

[jquery] Scroll to bottom of Div on page load (jQuery)

Examples related to jquery

Examples related to html