javascript: difference between scrollTop and offsetTop

Question

Is there a predictable relationship between cummulative offsetTop of an <a> element and the value of scrollTop after navigating to that <a> element?

I had naively assumed they would be equal, but I've encountered cases where scrollTop is larger (the scroll position is further down the page).

The following defines the question more precisely:

function TotalOffsetTop (e)
{
    var offset = 0;
    do 
        offset += e.offsetTop;
    while (e = e.offsetParent);
    return offset;
}

//navigate to MyBookmark
location.hash = "#MyBookmark"

var BookmarkOffsetTop = TotalOffsetTop(document.getElementByID("MyBookmark"));   
var CurrentPosition = document.getElementsByTagName("body")[0].scrollTop;

if ( CurrentPosition != BookmarkOffsetTop ) alert("Design Flaw!");

My ultimate goal is to find the nearest <a> tag whose start is above the top of the current viewport. This is so I can jump backward (and forward) to bookmarks relative to the current position in a document.

Are there some other measures I should be using instead of scrollTop and cummulative offsetTop?

I'm exploring the problem using Chrome, but I'd like to ultimately find something that works in at least several modern browsers. I'm trying to avoid jQuery.

+1 for trying to avoid jQuery – tnt-rox Jul 18 '14 at 07:59 — tnt-rox, Jul 18 '14 at 07:59
Hope you can accept the answer no? – Sampath Apr 23 '17 at 12:30 — Sampath, Apr 23 '17 at 12:30

score 6 · Answer 1 · answered Dec 10 '13 at 00:31

The main difference without getting into too much detail:

offsetTop is read-only, while scrollTop is read/write. According to this, you'd be on the safer side if you were to use offsetTop:

Be careful about the scrollTop property of the html element!

In Internet Explorer earlier than version 8, it retrieves the scroll amount in physical pixel size, while from version 8, it returns the amount in logical pixel size. What does it mean? If the browser is not at the normal zoom level (the user has the ability to zoom in or out a web page: CTRL and +, CTRL and -), the scrollTop property works differently from version 8 than in earlier versions.

The scroll amount is calculated in the default pixel size in Internet Explorer before version 8 even if the current pixel size in the document is different. From Internet Explorer 8 and in Firefox, Opera, Google Chrome and Safari, the scroll amount is calculated in the current pixel size.

For example, if the zoom level is 200%, the scrollTop property retrieves two times greater values before version 8 than from version 8 for the same scroll position.

Source for the text and more info on the two: Source

Thanks! My question was seeking a way to calculate the difference between them, but this gives me an idea for refactoring to avoid the problem of `location.hash = "#MyBookmark"` scrolling to an unexpected position. — dlh, Dec 10 '13 at 23:25

javascript: difference between scrollTop and offsetTop

1 Answers1