Coder Perfect

Return to the top of the scrollable div

Category: html

Tag:

Problem

<div id="containerDiv"></div>

#containerDiv {
  position: absolute;
  top: 0px;
  width: 400px;
  height: 100%;
  padding: 5px;
  font-size: .875em;
  overflow-y: scroll;
}

document.getElementById("containerDiv").innerHTML = variableLongText;

How do I return the scroll position to the top of the container div?

Asked by imhere

Solution #1

var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;

Take a look at the scrollTop characteristic.

Answered by Phrogz

Solution #2

Another option is to use a smooth animation like this.

$("#containerDiv").animate({ scrollTop: 0 }, "fast");

Answered by Mahmoud Ibrahim

Solution #3

I tried all of the other answers to this question, but none of them worked on Chrome. What worked in this case was slightly different:

$('body, html, #containerDiv').scrollTop(0);

Answered by Sunnyside Productions

Solution #4

This was effective for me:

document.getElementById('yourDivID').scrollIntoView();

Answered by Rajat

Solution #5

scrollTo

window.scrollTo(0, 0);

is the finest approach for scrolling windows to the top – the best thing is that it doesn’t require any id selectors and will function flawlessly even if we use the IFRAME structure.

jQuery

Another approach is to use jQuery, which would provide a nicer look for the same.

$('html,body').animate({scrollTop: 0}, 100);

where 0 is the number after the scroll The top parameter sets the vertical scrollbar location in pixels, while the second parameter is an optional parameter that displays the job completion time in microseconds.

Answered by Gaurav Tiwari

Post is based on https://stackoverflow.com/questions/10744299/scroll-back-to-the-top-of-scrollable-div