Why is 58 being added to array elements in my code?

Question

I've made a website here http://sycoscientistrecords.github.io . I have used the following code to determine the positions of various divs:

myscroll = {};
function getScrollpos(idname) {
    return document.getElementById(idname).offsetTop;
}
myscroll.point = [];
myscroll.idnames = []; 
myscroll.point[0] = getScrollpos("home");
myscroll.point[1] = getScrollpos("artists");
myscroll.point[2] = getScrollpos("songs");
myscroll.point[3] = getScrollpos("beats");
myscroll.point[4] = getScrollpos("contact");

The problem is that getScrollpos("beats"); returns 2766 but myscroll.point[3] returns 3124 . Similarly getScrollpos("contact") return 3668 but myscroll.point[4] return 4046 . On the other hand myscroll.point[0] and getScrollpos("home") both return the same value. And myscroll.point[1] and getScrollpos("artists") return same values too. Even if I remove all other javascript code from the source file the issue remains.

Question: Why is 58 being added to third and fourth array elements in my code?

PS: Although you can directly open the code of my website in dev tools. I've made a basic architecture with same javascript code to imitate the problem with the following code:

  var myscroll = {}; myscroll.list = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li"); myscroll.bodypos = function getScrollY() { scrOfY = 0; if (typeof(window.pageYOffset) == 'number') { //Netscape compliant scrOfY = window.pageYOffset; } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) { //DOM compliant scrOfY = document.body.scrollTop; } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { //IE6 standards compliant mode scrOfY = document.documentElement.scrollTop; } return scrOfY; } function getScrollpos(idname) { return document.getElementById(idname).offsetTop; } myscroll.point = []; myscroll.point[0] = getScrollpos("home"); myscroll.point[1] = getScrollpos("artists"); myscroll.point[2] = getScrollpos("songs"); myscroll.point[3] = getScrollpos("beats"); myscroll.point[4] = getScrollpos("contact"); function removeclass() { for (var i = 0; i < 5; i++) { myscroll.list[i].className = ""; } } window.addEventListener('scroll', function(e) { if (myscroll.bodypos() >= myscroll.point[0]) { removeclass(); myscroll.list[0].className = "active"; } if (myscroll.bodypos() >= myscroll.point[1]) { removeclass(); myscroll.list[1].className = "active"; } if (myscroll.bodypos() >= myscroll.point[2]) { removeclass(); myscroll.list[2].className = "active"; } if (myscroll.bodypos() >= myscroll.point[3]) { removeclass(); myscroll.list[3].className = "active"; } if (myscroll.bodypos() >= myscroll.point[4]) { removeclass(); myscroll.list[4].className = "active"; } }); for (var j = 0; j < 5; j++) { (function(j) { myscroll.list[j].anchor = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li")[j].getElementsByTagName("a")[0]; myscroll.list[j].anchor.addEventListener("click", function(event) { event.preventDefault(); if ((document.body.scrollTop != undefined) && (document.body.scrollTop < myscroll.point[j])) { var clr1 = setInterval(function() { if (document.body.scrollTop < myscroll.point[j] - 10) { document.body.scrollTop += 3; } else { document.body.scrollTop = myscroll.point[j]; clearInterval(clr1); } }, 1); } if ((document.documentElement.scrollTop != undefined) && (document.documentElement.scrollTop < myscroll.point[j])) { var clr2 = setInterval(function() { if (document.documentElement.scrollTop < myscroll.point[j] - 10) { document.documentElement.scrollTop += 3; } else { document.documentElement.scrollTop = myscroll.point[j]; clearInterval(clr2); } }, 1); } if ((document.body.scrollTop != undefined) && (document.body.scrollTop > myscroll.point[j])) { var clr3 = setInterval(function() { if (document.body.scrollTop >= myscroll.point[j] + 4) { document.body.scrollTop -= 3; } else { document.body.scrollTop = myscroll.point[j]; clearInterval(clr3); } }, 1); } if ((document.documentElement.scrollTop != undefined) && (document.documentElement.scrollTop > myscroll.point[j])) { var clr4 = setInterval(function() { if (document.documentElement.scrollTop >= myscroll.point[j] + 4) { document.documentElement.scrollTop -= 3; } else { document.documentElement.scrollTop = myscroll.point[j]; clearInterval(clr4); } }, 1); } alert(j); }, true); }(j)); } 

 #navbar, #navbar a:link, #navbar a:visited, #navbar a:hover { position: fixed; color: red !important; } #home { width: 500px; height: 500px; background-color: black; display: block; } #artists { width: 500px; height: 500px; background-color: gray; display: block; } #songs { width: 500px; height: 500px; background-color: yellow; display: block; } #beats { width: 500px; height: 500px; background-color: blue; display: block; } #contact { width: 500px; height: 500px; background-color: green; display: block; } 

 <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a> </li> <li><a href="#artists">Artists</a> </li> <li><a href="#songs">Songs</a> </li> <li><a href="#beats">Beats</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> <div id="home"></div> <div id="artists"></div> <div id="songs"></div> <div id="beats"></div> <div id="contact"></div> 

Answer 1

I did some research in Google Chrome. After visiting your site I opened developer console (F12) and executed your code. Here are results:

myscroll = {};
function getScrollpos(idname) {
    return document.getElementById(idname).offsetTop;
}
myscroll.point = [];
myscroll.idnames = []; 
myscroll.point[0] = getScrollpos("home");
myscroll.point[1] = getScrollpos("artists");
myscroll.point[2] = getScrollpos("songs");
myscroll.point[3] = getScrollpos("beats");
myscroll.point[4] = getScrollpos("contact");

getScrollpos("home");
// 0
getScrollpos("songs");
// 1202
getScrollpos("beats");
// 2017
getScrollpos("contact");
// 2857
myscroll.point
// [0, 420, 1202, 2017, 2857]

Looks like everything is OK.

Answer 2

Due to how it "measures", the result of

getScrollpos("beats");

Might change depending on you displaying the developer console or not when you call the function, is it possible that the difference comes from the way you are testing?

Try it out, depending on how tall you make the dev console, that function will return different values.