Use jQuery to scroll to the bottom of a div with lots of text

Question

I have a div with a scrollbar on the right when there is a lot of text in it  I tried to use this code to scroll to the bottom of a div when the page loads  but I am not having much luck  How can it be achieved   Style   div messageScrollArea      width  100       max-height  300px      overflow  auto      JavaScript code     document  ready function          var objDiv       messageScrollArea        if  objDiv length  gt  0           objDiv 0  scrollTop   objDiv 0  scrollHeight

User · Answer

jQuery simple solution  one line  no external lib required        myDivID   animate   scrollTop      myDivID   0  scrollHeight    1000     Change 1000 to another value  this is the duration of the animation

User · Answer

x000D   x000D    function     x000D    var wtf          scroll    x000D    var height   wtf 0  scrollHeight  x000D    wtf scrollTop height   x000D      x000D    scroll   x000D     width  200px  x000D     height  300px  x000D     overflow-y  scroll  x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  scroll  gt  x000D       lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt   lt center gt  lt b gt Voila   You have already reached the bottom    lt b gt  lt  center gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here s one sample  http   jsfiddle net CUUfb 1

User · Answer

Scrolling with animation   Your DIV    lt div class  messageScrollArea  style  height  100px overflow  auto   gt        Hello World  Hello World  Hello World  Hello World  Hello World  Hello       Hello World  Hello World  Hello World  Hello World  Hello World  Hello       Hello World  Hello World  Hello World  Hello World  Hello World  Hello  lt  div gt    jQuery part   jQuery document  ready function               var  t       messageScrollArea         t animate   scrollTop       messageScrollArea   0  scrollHeight    slow           http   jsfiddle net 3Wx3U

User · Answer

No need to calculate the actual height of the contents  you can just scroll down a lot     function            messageScrollArea   scrollTop 1E10

User · Answer

note  use of stop function to prevent animation build-ups if called repeatedly   subtracting container height brings scrollTo position to container bottom scrollUp   function             scroller   stop   animate   scrollTop  0     slow       scrollDown   function         var scroller       scroller        var height   scroller 0  scrollHeight -   scroller  height           scroller  stop   animate   scrollTop  height     slow

User · Answer

Make a jQuery function more flexible     fn scrollDown function        let el   this      el scrollTop el 0  scrollHeight        div   scrollDown     https   jsfiddle net Thielicious 82ar7db2

User · Answer

please refer     scrollTop    You can give a try to the solution here   http   jsfiddle net y430ovjt    x000D   x000D    function     x000D    var wtf          scroll    x000D    var height   wtf 0  scrollHeight  x000D    wtf scrollTop height   x000D      x000D    scroll   x000D     width  200px  x000D     height  300px  x000D     overflow-y  scroll  x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  scroll  gt  x000D       lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt blah lt br  gt halb lt br  gt   lt center gt  lt b gt Voila   You have already reached the bottom    lt b gt  lt  center gt  x000D   lt  div gt  x000D   x000D   x000D      Edit   for the people who are looking for a nice little animation with scrolling   http   jsfiddle net o98zbx8j   x000D   x000D    function     x000D    var height   0  x000D   x000D    function scroll height  ele    x000D      this stop   animate   x000D        scrollTop  height x000D         1000  function     x000D        var dir   height    top     bottom   x000D          ele  html  scroll to     dir  attr   x000D          id  dir x000D            x000D          x000D       x000D    var wtf       scroll    x000D        bottom   top   click function     x000D      height   height  lt  wtf 0  scrollHeight   wtf 0  scrollHeight   0  x000D      scroll call wtf  height  this   x000D        x000D      x000D   scroll   x000D    width  300px  x000D    height  200px  x000D    overflow-y  scroll  x000D    x000D   bottom  x000D   top   x000D    font-size  12px  x000D    cursor  pointer  x000D    min-width  50px  x000D    padding  5px  x000D    border  2px solid  0099f9  x000D    border-radius  5px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt span id  bottom  gt scroll to bottom lt  span gt  x000D   lt br   gt  x000D   lt br   gt  x000D   lt br   gt  x000D   lt div id  scroll  gt  x000D     lt center gt  lt b gt There s Plenty of Room at the Top  seriously  lt  b gt  x000D     lt  center gt  x000D     lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Aliquam at enim dignissim  eleifend eros at  lobortis sem  Mauris vel erat felis  Proin quis convallis neque  quis molestie augue  Vestibulum aliquam elit sit amet venenatis eleifend  Donec dapibus x000D      mauris ac lorem mattis pulvinar  Curabitur cursus elit commodo tellus bibendum  ut euismod nisi luctus  Pellentesque id magna nunc  Nam luctus nisi sapien  ac porta sem ultrices vitae  Suspendisse aliquet eleifend nunc  in mattis tellus dapibus rutrum  x000D      Nullam a sem venenatis  suscipit lorem eu  facilisis leo  Nunc eget eleifend magna  Curabitur dictum dui in massa vestibulum sagittis  Mauris sodales neque at tincidunt feugiat  Curabitur iaculis purus nec tortor elementum pulvinar  Donec non mattis x000D      augue  lt  p gt  x000D   x000D     lt p gt Integer sit amet iaculis nulla  Cras vehicula nunc eu leo aliquet  et convallis erat aliquet  Aenean tempor faucibus justo  porta blandit felis semper at  Maecenas auctor nibh sit amet tellus consectetur  et varius velit iaculis  Phasellus convallis x000D      lacinia dapibus  Praesent tempus nunc elit  id volutpat tellus sagittis commodo  Vestibulum ultrices quam vel congue viverra  Integer varius diam quis tempor consequat  Integer pulvinar neque lorem  eu lobortis augue pharetra vel  Praesent ornare x000D      lacus quis nisi fermentum dignissim  Curabitur hendrerit augue eu interdum interdum  lt  p gt  x000D   x000D     lt p gt Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  Etiam a ex non dolor rutrum suscipit vitae sit amet nibh  Donec pulvinar odio non ultrices dignissim  Quisque in risus lobortis  accumsan ante et  pellentesque x000D      erat  Quisque ultricies tortor sed tortor venenatis posuere  Integer convallis nunc ut tellus sagittis  et imperdiet erat volutpat  Sed non maximus augue  Sed mattis ipsum sed sem rutrum  at mollis ligula facilisis  Etiam fringilla hendrerit mi eu x000D      molestie  Etiam semper feugiat nunc  eu pellentesque metus porta pretium  Duis tempor neque ut libero scelerisque euismod  Vivamus molestie  quam a mattis scelerisque  dolor turpis accumsan quam  a cursus sem quam at ex  Suspendisse congue elit quis x000D      sem scelerisque commodo  lt  p gt  x000D   x000D     lt p gt Ut eu odio at urna hendrerit ullamcorper  Nulla ut turpis molestie diam aliquet luctus  Curabitur dignissim tellus ut porta sagittis  Vivamus ut erat ut neque consequat interdum  Duis vitae risus eget arcu pulvinar venenatis  Maecenas erat arcu  hendrerit x000D      id tortor ut  viverra elementum nibh  Nam quis metus sit amet lacus rhoncus porttitor ac non ipsum  Nullam lacus dui  tempus sed elementum ut  venenatis eget ipsum  Quisque blandit maximus enim eu porta  lt  p gt  x000D   x000D     lt p gt Donec mollis diam eros  eu ultrices magna sollicitudin vitae  Nullam quam sapien  elementum a metus nec  facilisis scelerisque nulla  Praesent lobortis nisi ac leo laoreet  quis molestie ipsum porta  Suspendisse aliquet in velit eu ullamcorper  Maecenas x000D      auctor  mi ut viverra elementum  metus turpis commodo orci  eu commodo erat dolor malesuada arcu  Fusce condimentum augue lt  p gt  x000D     lt center gt  lt b gt Voila   You have reached the bottom  already     lt  b gt  x000D     lt  center gt  x000D   lt  div gt  x000D   x000D   x000D

[javascript] Use jQuery to scroll to the bottom of a div with lots of text

Examples related to javascript

Examples related to jquery