Scroll Automatically to the Bottom of the Page

Question

Consider I have a list of questions  When I click on the first question  it should automatically take me to the bottom of the page  As a matter of fact  I do know that this can be done using jQuery  So  could you provide me with some documentation or some links where I can find answer to this question  EDIT  Need to scroll to a particular HTML element at the bottom of the page

User · Answer

You can use this function wherever you need to call it:

function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

}

jquery.com: ScrollTo

User · Answer

jQuery isn t necessary  Most of the top results I got from a Google search gave me this answer  window scrollTo 0 document body scrollHeight    Where you have nested elements  the document might not scroll  In this case  you need to target the element that scrolls and use it s scroll height instead  window scrollTo 0 document querySelector  quot  scrollingContainer quot   scrollHeight   You can tie that to the onclick event of your question  i e   lt div onclick  quot ScrollToBottom   quot        Some additional sources you can take a look at   http   www sourcetricks com 2010 07 javascript-scroll-to-bottom-of-page html http   www alecjacobson com weblog  p 753 http   www mediacollege com internet javascript page scroll html http   www electrictoolbox com jquery-scroll-bottom

User · Answer

Below should be the cross browser solution  It has been tested on Chrome  Firefox  Safari and IE11  window scrollTo 0  document body scrollHeight    document documentElement scrollHeight     window scrollTo 0 document body scrollHeight   doesn t work on Firefox  at least for Firefox 37 0 2

User · Answer

I have an Angular app with dynamic content and I tried several of the above answers with not much success  I adapted  Konard s answer and got it working in plain JS for my scenario   HTML   lt div id  app  gt       lt button onClick  scrollToBottom    gt Scroll to Bottom lt  button gt       lt div class  row  gt           lt div class  col-md-4  gt               lt br gt               lt h4 gt Details for Customer 1 lt  h4 gt               lt hr gt               lt  -- sequence Id -- gt               lt div class  form-group  gt                   lt input type  text  class  form-control  placeholder  ID  gt               lt  div gt               lt  -- name -- gt               lt div class  form-group  gt                   lt input type  text  class  form-control  placeholder  Name  gt               lt  div gt               lt  -- description -- gt               lt div class  form-group  gt                   lt textarea type  text  style  min-height  100px  placeholder  Description   gt  lt  textarea gt               lt  div gt               lt  -- address -- gt               lt div class  form-group  gt                   lt input type  text  class  form-control  placeholder  Address  gt               lt  div gt               lt  -- postcode -- gt               lt div class  form-group  gt                   lt input type  text  class  form-control  placeholder  Postcode  gt               lt  div gt               lt  -- Image -- gt               lt div class  form-group  gt                   lt img style  width  100   height  300px   gt                   lt div class  custom-file mt-3  gt                       lt label class  custom-file-label  gt    Choose file       lt  label gt                   lt  div gt               lt  div gt               lt  -- Delete button -- gt               lt div class  form-group  gt                   lt hr gt                   lt div class  row  gt                       lt div class  col  gt                           lt button class  btn btn-success btn-block  data-toggle  tooltip  data-placement  bottom  title  Click to save  gt Save lt  button gt                           lt button class  btn btn-success btn-block  data-toggle  tooltip  data-placement  bottom  title  Click to update  gt Update lt  button gt                       lt  div gt                       lt div class  col  gt                           lt button class  btn btn-danger btn-block  data-toggle  tooltip  data-placement  bottom  title  Click to remove  gt Remove lt  button gt                       lt  div gt                   lt  div gt                   lt hr gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    CSS  body       background   20262E      padding  20px      font-family  Helvetica      app       background   fff      border-radius  4px      padding  20px      transition  all 0 2s      JS  function scrollToBottom         scrollInterval      stopScroll       var scrollInterval   setInterval function              document documentElement scrollTop   document documentElement scrollHeight         50        var stopScroll   setInterval function              clearInterval scrollInterval          100       Tested on the latest Chrome  FF  Edge  and stock Android browser  Here s a fiddle   https   jsfiddle net cbruen1 18cta9gd 16

User · Answer

Vanilla JS implementation   element scrollIntoView false     https   developer mozilla org en-US docs Web API element scrollIntoView

User · Answer

A picture is worth a thousand words   The key is   document documentElement scrollTo     left  0    top  document documentElement scrollHeight - document documentElement clientHeight    behavior   smooth        It is using document documentElement  which is the  lt html gt  element  It is just like using window  but it is just my personal preference to do it this way  because if it is not the whole page but a container  it works just like this except you d change document body and document documentElement to document querySelector   container-id     Example    x000D   x000D  let cLines   0  x000D   x000D  let timerID   setInterval function     x000D    let elSomeContent   document createElement  div    x000D   x000D    if    cLines  gt  33    x000D      clearInterval timerID   x000D      elSomeContent innerText    That s all folks    x000D      else   x000D      elSomeContent innerText   new Date   toLocaleDateString  en     x000D        dateStyle   long   x000D        timeStyle   medium  x000D          x000D      x000D    document body appendChild elSomeContent   x000D   x000D    document documentElement scrollTo   x000D      left  0  x000D      top  document documentElement scrollHeight - document documentElement clientHeight  x000D      behavior   smooth  x000D        x000D   x000D     1000   x000D  body   x000D    font  27px Arial  sans-serif  x000D    background   ffc  x000D    color   333  x000D    x000D   x000D   x000D    You can compare the difference if there is no scrollTo      x000D   x000D  let cLines   0  x000D   x000D  let timerID   setInterval function     x000D    let elSomeContent   document createElement  div    x000D   x000D    if    cLines  gt  33    x000D      clearInterval timerID   x000D      elSomeContent innerText    That s all folks    x000D      else   x000D      elSomeContent innerText   new Date   toLocaleDateString  en     x000D        dateStyle   long   x000D        timeStyle   medium  x000D          x000D      x000D    document body appendChild elSomeContent   x000D   x000D     1000   x000D  body   x000D    font  27px Arial  sans-serif  x000D    background   ffc  x000D    color   333  x000D    x000D   x000D   x000D

User · Answer

window scrollTo 0 1e10    always works   1e10 is a big number  so its always the end of the page

User · Answer

If you want to scroll entire page to the bottom   var scrollingElement    document scrollingElement    document body   scrollingElement scrollTop   scrollingElement scrollHeight    See the sample on JSFiddle  If you want to scroll an element to the bottom   function gotoBottom id      var element   document getElementById id      element scrollTop   element scrollHeight - element clientHeight      And that s how it works     Ref  scrollTop  scrollHeight  clientHeight  UPDATE  Latest versions of Chrome  61   and Firefox does not support scrolling of body  see  https   dev opera com articles fixing-the-scrolltop-bug

User · Answer

Here s my solution           scroll to bottom if at bottom   function scrollbottom         if  typeof scr1    undefined   clearTimeout scr1         var scrollTop    document documentElement  amp  amp  document documentElement scrollTop     document body scrollTop      var scrollHeight    document documentElement  amp  amp  document documentElement scrollHeight     document body scrollHeight      if  scrollTop   window innerHeight   gt   scrollHeight-50  window scrollTo 0 scrollHeight 50      scr1 setTimeout function   scrollbottom    200       scr1 setTimeout function   scrollbottom    200

User · Answer

Late to the party  but here s some simple javascript-only code to scroll any element to the bottom   function scrollToBottom e      e scrollTop   e scrollHeight - e getBoundingClientRect   height

User · Answer

You may try Gentle Anchors a nice javascript plugin   Example   function SomeFunction          your code      Pass an id attribute to scroll to  The   is required   Gentle Anchors Setup   destination         maybe some more code     Compatibility Tested on    Mac Firefox  Safari  Opera Windows Firefox  Opera  Safari  Internet Explorer 5 55  Linux untested but should be fine with Firefox at least

User · Answer

I ve had the same issue  For me at one point in time the div s elements were not loaded entirely and the scrollTop property was initialized with the current value of scrollHeight  which was not the correct end value of scrollHeight  My project is in Angular 8 and what I did was   I used viewchild in order to obtain the element in my  ts file  I ve inherited the AfterViewChecked event and placed one line of code in there which states that the viewchild element has to take into the scrollTop value the value of scrollHeight  this viewChildElement nativeElement scrollTop   this viewChildElement nativeElement scrollHeight    The AfterViewChecked event fires a few times and it gets in the end the proper value from scrollHeight

User · Answer

I found a trick to make it happen  Put an input type text at the bottom of the page and call a jquery focus on it whenever you need to go at the bottom  Make it readonly and nice css to clear border and background

User · Answer

If any one searching for Angular   you just need to scroll down add this to your div    scrollMe  scrollTop   scrollMe scrollHeight       lt div class  my-list   scrollMe  scrollTop   scrollMe scrollHeight  gt      lt  div gt

User · Answer

one liner to smooth scroll to the bottom  window scrollTo   left  0  top  document body scrollHeight  behavior   smooth        To scroll up simply set top to 0

User · Answer

You can use this to go down the page in an animation format      html body   animate  scrollTop  document body scrollHeight   fast

User · Answer

A simple way if you want to scroll down specific element  Call this function whenever you want to scroll down    x000D   x000D  function scrollDown     x000D   document getElementById  scroll   scrollTop    document getElementById  scroll   scrollHeight x000D    x000D  ul  x000D   height  100px  x000D   width  200px  x000D   overflow-y  scroll  x000D   border  1px solid  000  x000D    x000D   lt ul id  scroll  gt  x000D   lt li gt Top Here lt  li gt  x000D   lt li gt Something Here lt  li gt  x000D   lt li gt Something Here lt  li gt  x000D   lt li gt Something Here lt  li gt  x000D   lt li gt Something Here lt  li gt  x000D   lt li gt Something Here lt  li gt  x000D   lt li gt Something Here lt  li gt  x000D   lt li gt Something Here lt  li gt  x000D   lt li gt Something Here lt  li gt  x000D   lt li gt Something Here lt  li gt  x000D   lt li gt Bottom Here lt  li gt  x000D   lt li style  color  red  gt Bottom Here lt  li gt  x000D   lt  ul gt  x000D   x000D   lt br   gt  x000D   x000D   lt button onclick  scrollDown    gt Scroll Down lt  button gt  x000D   x000D   x000D

User · Answer

So many answers trying to calculate the height of the document  But it wasn t calculating correctly for me  However  both of these worked   jquery         html body   animate  scrollTop  9999      or just js      window scrollTo 0 9999

User · Answer

you can do this too with animation  its very simple      html  body   animate      scrollTop     footer   offset   top      scrollTop      your-id   offset   top      scrollTop      your-class   offset   top     slow      hope helps  thank you

User · Answer

Sometimes the page extends on scroll to buttom  for example in social networks   to scroll down to the end  ultimate buttom of the page  I use this script   var scrollInterval   setInterval function          document documentElement scrollTop   document documentElement scrollHeight     50     And if you are in browser s javascript console  it might be useful to be able to stop the scrolling  so add   var stopScroll   function     clearInterval scrollInterval        And then use stopScroll      If you need to scroll to particular element  use   var element   document querySelector   element-selector    element scrollIntoView      Or universal script for autoscrolling to specific element  or stop page scrolling interval    var notChangedStepsCount   0  var scrollInterval   setInterval function         var element   document querySelector   element-selector        if  element                element found         clearInterval scrollInterval           element scrollIntoView          else if  document documentElement scrollTop   window innerHeight     document documentElement scrollHeight                no element - gt  scrolling         notChangedStepsCount   0          document documentElement scrollTop   document documentElement scrollHeight        else if  notChangedStepsCount  gt  20                no more space to scroll         clearInterval scrollInterval         else              waiting for possible extension  autoload  of the page         notChangedStepsCount             50

User · Answer

This will guaranteed scroll to the bottom  Head Codes   lt script src  http   code jquery com jquery-1 8 1 min js  gt  lt  script gt   lt script language  javascript  type  text javascript  gt  function scrollToBottom           html  body   scrollTop     html  body   0  scrollHeight      lt  script gt    Body code   lt a href  javascript void 0    onmouseover  scrollToBottom     title  Scroll to Bottom  gt  amp  9660  Bottom  amp  9660  lt  a gt

User · Answer

You can attach any id to reference attribute href of link element    lt a href   myLink  id  myLink  gt      Click me  lt  a gt    In the example above when user clicks Click me at the bottom of page  navigation navigates to Click me itself

User · Answer

For Scroll down in Selenium use below code   Till the bottom drop down  scroll till the height of the page  Use the below javascript code that would work fine in both  JavaScript and React   JavascriptExecutor jse    JavascriptExecutor  driver      driver is your browser webdriver object   jse executeScript  window scrollBy 0 document body scrollHeight    document documentElement scrollHeight

[javascript] Scroll Automatically to the Bottom of the Page

Examples related to javascript

Examples related to jquery