Scroll back to the top of scrollable div

Question

lt div id  containerDiv  gt  lt  div gt     containerDiv     position  absolute    top  0px    width  400px    height  100     padding  5px    font-size   875em    overflow-y  scroll      document getElementById  containerDiv   innerHTML   variableLongText    How to reset the scroll position back to top of container div the next time

User · Answer

these two codes worked for me like a charm this first will take to scroll to the top of the page but if you want to scroll to some specific div use the second one with your div id.

$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();

If you want to scroll to by a class name use the below code

var $container = $("html,body");
var $scrollTo = $('.main-content');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);

User · Answer

scrollTo  window scrollTo 0  0     is the ultimate solution for scrolling the windows to the top - the best part is that it does not require any id selector and even if we use the IFRAME structure it will work extremely well      The scrollTo   method scrolls the document to the specified coordinates    window scrollTo xpos  ypos     xpos   Number  Required  The coordinate to scroll to  along the x-axis  horizontal   in pixels   ypos   Number  Required  The coordinate to scroll to  along the y-axis  vertical   in pixels   jQuery  Another option to do the same is using jQuery and it will give a smoother look for the same     html body   animate  scrollTop  0   100     where 0 after the scrollTop specifies the vertical scrollbar position in the pixel and second parameter is an optional parameter which shows the time in microseconds to complete the task

User · Answer

2020 UPDATE You can use  scroll   to easily scroll elements or window  It has a built-in smooth scroll effect so basically the code couldn t be simpler  Standard properties  var options         top        0            Number of pixels along the Y axis to scroll the window or element     left       0            Number of pixels along the X axis to scroll the window or element      behavior    smooth        smooth   auto   - animate smoothly  or move in a single jump    DOCS  https   developer mozilla org en-US docs Web API Window scroll SEE ALSO   scrollIntoView   https   developer mozilla org en-US docs Web API Element scrollIntoView  DEMO   x000D   x000D  document getElementById  btn   addEventListener  click  function       document getElementById  container   scroll  top 0 behavior  smooth            x000D    DEMO    container    width 300px    max-height 300px    padding 1rem    margin-left auto    margin-right auto    background-color  222    color  ccc    text-align justify    overflow-y auto     btn    width 100     margin-top 1rem    x000D   lt div id  container  gt     lt div gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  div gt     lt button id  btn  gt Scroll to top lt  button gt   lt  div gt  x000D   x000D   x000D

User · Answer

For me the scrollTop way did not work  but I found other   element style display    none   setTimeout function     element style display    block     100     Did not check the minimum time for reliable css rendering though  100ms might be overkill

User · Answer

This worked for me    document getElementById  yourDivID   scrollIntoView

User · Answer

Another way to do it with a smooth animation is like this       containerDiv   animate   scrollTop  0     fast

User · Answer

As per Fran  ois No  l s answer  For those who still can t make this work  make sure that the overflowed element is displayed before using the jQuery function    I had been working in a bootstrap modal that I repeatedly bring up with account permissions in a div that overflows on the y dimension  My problem was  I was trying to use the jquery  scrollTop 0  function and it would not work no matter how I tried to do it  I had to setup an event for the modal that didn t reset the scrollbar until the modal had stopped animating  The code that finally worked for me is here           add-modal   on  shown bs modal   function  e               div border   scrollTop 0

User · Answer

I tried the existing answers to this question  and none of them worked on Chrome for me  What did work was slightly different      body  html   containerDiv   scrollTop 0

User · Answer

For those who still can t make this work  make sure that the overflowed element is displayed before using the jQuery function  Example      elem   show        elem   scrollTop 0

User · Answer

If the html content overflow a single viewport  this worked for me using only javascript   document getElementsByTagName  body   0  scrollTop   0    Regards

User · Answer

var myDiv   document getElementById  containerDiv    myDiv innerHTML   variableLongText  myDiv scrollTop   0    See the scrollTop attribute

User · Answer

If you want to scroll with a smooth transition  you could use this    Vanilla JS   const tabScroll   document getElementById  tabScroll    window scrollTo      behavior    smooth      left   0     top   tabScroll offsetTop - 80          If your target users are Chrome and Firefox  then this is   good   But unfortunately this method isn   t supported well enough on   all browsers   Check Here   Hope this helps

User · Answer

The ID Should have the id of the corresponding div that has the overflow css property   document querySelector   YOUR OVERFLOWED DIV   scrollTop   0

User · Answer

This is the only way it worked for me  with smooth scrolling transition        html  body   animate       scrollTop      containerDiv   offset   top       250

User · Answer

When getting element by class name  don t forget the return value is an array  Hence this code   document getElementByClassName  dropdown-menu   scrollTop   0   Would not work  Use code below instead    document getElementByClassName  dropdown-menu   0  scrollTop   0   I figured other people might encounter a similar problem as I did  so this should do the trick

[javascript] Scroll back to the top of scrollable div

Examples related to javascript

Examples related to html

Examples related to scroll