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?
P.S: 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>
