Javascript - Scrolled position



How can we scroll to the top of the page?

window.scrollTo(x-coord, y-coord);

How can we scroll to the bottom of the page?


How can we determine the browser current scroll position? How can we determine if browser somehow has been scrolled?

var currentScrollPosition = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;

If the currentScrollPosition is greater than zero, then the document has been scrolled (either by the user or automatically by code).

What we also need to know is the current position of the visual viewport relative to the layout viewport. This is the scrolling offset. Just as on desktop, the scrolling offset is stored in window.pageXOffset and window.pageYOffset.

The window.pageXOffset and window.pageYOffset properties contain the horizontal and vertical scrolling offsets of the document. Thus you can find out how much the user has scrolled. These properties are measured in CSS pixels, too. You want to know how much of the document has already been scrolled up, whatever zoom state it’s in.

In theory, if the user scrolls up and then zooms in, window.pageX/YOffset will change. However, the browsers try to keep web pages consistent by keeping the same element at the top of the visible page when the user zooms. That doesn’t always work perfectly, but it means that in practice window.pageX/YOffset doesn’t really change: the number of CSS pixels that have been scrolled out of the window remains (roughly) the same.

How can we find the current scroll position of an element?

See the above question. Just substitute document element with just the normal element object.

How can we scroll an element to its end?

If an element has a scroll bar, how can we programmatically scroll the scroll bar to the end of the element content?**

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

var mydiv = $("#scroll");

  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

function scrollToBottom(id){
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;

function scrollSmoothToBottom (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);

How can we scroll the document so that a particular element is visible or come into view?

if (element.scrollIntoView) {
} else {
    var elementPosition = element.offsetTop;
    window.scrollTo(0, elementPosition);

How can we determine if the element has been totally scrolled to the end?

if (element.scrollHeight - element.scrollTop === element.clientHeight) {
    // element had been scrolled to the end

How can we determine the total height of all child elements?


How can we detect if an element has a scrollbar?

function has_scrollbar(elem_id)
    elem = document.getElementById(elem_id);
    if (elem.clientHeight < elem.scrollHeight) {
        alert("The element has a vertical scrollbar!");
    }  else {
        alert("The element doesn't have a vertical scrollbar.");

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License