How to get maximum document scrolltop value

Question

I am making some plugin and I need to get maximum scrollTop value of the document. Maximum scrollTop value is 2001 , but $(document).height() returns 2668 and $('body')[0].scrollHeight gives me undefined.

How to get 2001 through javascript/jquery?!

I think i just figured out... $(document).height - $(window).height — hjuster, Oct 18 '12 at 23:31
Did you try `$(document).prop("scrollHeight");`, or if you have margins messing things up : `$(document).outerHeight() - $(window).outerHeight()`, or to get the total scrollheight minus the window height : `$(document).prop("scrollHeight")-$(window).outerHeight()`. — adeneo, Oct 18 '12 at 23:42

score 34 · Accepted Answer · answered Oct 18 '12 at 23:42

34

The code in your comments should work:

$(document).height() - $(window).height()

Here's an example that alerts when you scroll to the maximum scroll position: http://jsfiddle.net/DWn7Z/

answered Oct 18 '12 at 23:42

Timm

12,553
4
31
43

Ugh... why do I have those additional 10 pixels? :( – hjuster Oct 19 '12 at 00:10
@hjuster Try `outerHeight` for both? – Ian Oct 19 '12 at 00:18
again 2011 with outerHeight, no changes... But the difference is always 10px, no matter the resolution, which are actually great news! – hjuster Oct 19 '12 at 00:28
How do you know that it should be 2001? Does my example work correctly for you? – Timm Oct 19 '12 at 09:53
@hjuster could be the scrollbar height – Omu Feb 25 '16 at 09:59
This is **incorrect** because it doen't consider the horizontal scroll bar height. The window height includes the scroll bar height while the document height doesn't. – Finesse Mar 01 '18 at 08:57

score 3 · Answer 2 · answered Jan 14 '18 at 02:00

Here is an answer i wrote https://stackoverflow.com/a/48246003/7668448, it's about a polyfill for scrollTopMax which is a native property for Element objects. (only mozilla). Look at the response, you can really like it.

Bellow just a quick snippet. The answer in the link is more rich (make sure to look).

(function(elmProto){
    if ('scrollTopMax' in elmProto) {
        return;
    }
    Object.defineProperties(elmProto, {
        'scrollTopMax': {
            get: function scrollTopMax() {
              return this.scrollHeight - this.clientTop;
            }
        },
        'scrollLeftMax': {
            get: function scrollLeftMax() {
              return this.scrollWidth - this.clientLeft;
            }
        }
    });
}
)(Element.prototype);

use example:

var el = document.getElementById('el1');
var max = el.scrollLeftMax;

I believe `this.scrollHeight - this.clientHeight` is what would be equivalent to `this.scrollTopMax`. — ffxsam, Jun 18 '21 at 01:20

score 1 · Answer 3 · answered Oct 18 '12 at 23:54

If you want to "guess" the maximum scrolltop value, maybe you should compare the height of the document and the viewport height (size of your window).

/**
 * Return a viewport object (width and height)
 */
function viewport()
{
    var e = window, a = 'inner';
    if (!('innerWidth' in window))
    {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}

// Retrieve the height of the document, including padding, margin and border
var documentHeight = $(document).outerheight(true);
var viewPortData = viewport();

var maxScrollTop = documentHeight - viewPortData.height;

Of course, in your plugin, you should also add a listener on the resize event, and re-calculate the maximum scrollTop.

with outerHeight on window and document, it is working, as with my function. Try it ! http://fiddle.jshell.net/9MAVM/3/ — MatRt, Oct 19 '12 at 00:26
For me its not working, i have always those paranormal additional 10px. Your function gives me the same result as the one from my first comment ,,$(document).height - $(window).height " . But anyway, thanks , consider this solved... — hjuster, Oct 19 '12 at 01:00

tremby · Answer 4 · 2016-05-17T05:12:44.430

In vanilla Javascript I'm currently doing this:

getScrollTopMax = function () {
  var ref;
  return (ref = document.scrollingElement.scrollTopMax) != null
      ? ref
      : (document.scrollingElement.scrollHeight - document.documentElement.clientHeight);
};

This returns Gecko's non-standard scrollTopMax if it exists, otherwise calculates it. I'm using document.scrollingElement here, which only exists on particular browsers, but it's easy to polyfill.

score 1 · Answer 5 · answered Feb 26 '23 at 12:40

1

This is what worked for me, for scrolling of the main document as requested by OP:

window.document.documentElement.scrollHeight - window.document.documentElement.clientHeight

answered Feb 26 '23 at 12:40

oriadam

7,747
2
50
48

I had to add this answer because all previous answers either did not work for me or were not accurate. – oriadam Feb 26 '23 at 12:40

Mayank Kumar · Answer 6 · 2021-06-26T04:40:22.380

0

Try this, a simple and easy solution :-

document.body.getBoundingClientRect().bottom;

Found this on W3 Schools....

edited Jun 26 '21 at 04:40

answered Mar 26 '21 at 07:01

Mayank Kumar

61
6

How to get maximum document scrolltop value

6 Answers6

Linked