0
私はここにウェブサイトを作ったhttp://sycoscientistrecords.github.io。私は、様々なdiv要素の位置を決定するために、次のコードを使用している：コード内の配列要素に58が追加されているのはなぜですか？
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("beats");戻り2766しかしmyscroll.point[3]戻る3124。同様にgetScrollpos("contact")が返信3668であるが、myscroll.point[4]返信4046である。一方、myscroll.point[0]とgetScrollpos("home")はどちらも同じ値を返します。 myscroll.point[1] and getScrollpos("artists")も同じ値を返します。ソースファイルから他のすべてのjavascriptコードを削除しても、問題は残ります。
質問：私のコードで3番目と4番目の配列要素に58が追加されているのはなぜですか？
P.S：私のウェブサイトのコードを開発ツールで直接開くことはできますが、私はGoogleのChromeでいくつかの研究を行った
\t var myscroll = {};
\t myscroll.list = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li");
\t myscroll.bodypos = function getScrollY() {
\t scrOfY = 0;
\t if (typeof(window.pageYOffset) == 'number') {
\t //Netscape compliant
\t scrOfY = window.pageYOffset;
\t } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
\t //DOM compliant
\t scrOfY = document.body.scrollTop;
\t } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
\t //IE6 standards compliant mode
\t scrOfY = document.documentElement.scrollTop;
\t }
\t return scrOfY;
\t }
\t function getScrollpos(idname) {
\t return document.getElementById(idname).offsetTop;
\t }
\t myscroll.point = [];
\t myscroll.point[0] = getScrollpos("home");
\t myscroll.point[1] = getScrollpos("artists");
\t myscroll.point[2] = getScrollpos("songs");
\t myscroll.point[3] = getScrollpos("beats");
\t myscroll.point[4] = getScrollpos("contact");
\t function removeclass() {
\t for (var i = 0; i < 5; i++) {
\t myscroll.list[i].className = "";
\t }
\t }
\t window.addEventListener('scroll', function(e) {
\t if (myscroll.bodypos() >= myscroll.point[0]) {
\t removeclass();
\t myscroll.list[0].className = "active";
\t }
\t if (myscroll.bodypos() >= myscroll.point[1]) {
\t removeclass();
\t myscroll.list[1].className = "active";
\t }
\t if (myscroll.bodypos() >= myscroll.point[2]) {
\t removeclass();
\t myscroll.list[2].className = "active";
\t }
\t if (myscroll.bodypos() >= myscroll.point[3]) {
\t removeclass();
\t myscroll.list[3].className = "active";
\t }
\t if (myscroll.bodypos() >= myscroll.point[4]) {
\t removeclass();
\t myscroll.list[4].className = "active";
\t }
\t });
\t for (var j = 0; j < 5; j++) {
\t (function(j) {
\t myscroll.list[j].anchor = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li")[j].getElementsByTagName("a")[0];
\t myscroll.list[j].anchor.addEventListener("click", function(event) {
event.preventDefault();
\t if ((document.body.scrollTop != undefined) && (document.body.scrollTop < myscroll.point[j])) {
\t var clr1 = setInterval(function() {
\t if (document.body.scrollTop < myscroll.point[j] - 10) {
\t document.body.scrollTop += 3;
\t } else {
\t document.body.scrollTop = myscroll.point[j];
\t clearInterval(clr1);
\t }
\t }, 1);
\t }
\t if ((document.documentElement.scrollTop != undefined) && (document.documentElement.scrollTop < myscroll.point[j])) {
\t var clr2 = setInterval(function() {
\t if (document.documentElement.scrollTop < myscroll.point[j] - 10) {
\t document.documentElement.scrollTop += 3;
\t } else {
\t document.documentElement.scrollTop = myscroll.point[j];
\t clearInterval(clr2);
\t }
\t }, 1);
\t }
\t if ((document.body.scrollTop != undefined) && (document.body.scrollTop > myscroll.point[j])) {
\t var clr3 = setInterval(function() {
\t if (document.body.scrollTop >= myscroll.point[j] + 4) {
\t document.body.scrollTop -= 3;
\t } else {
\t document.body.scrollTop = myscroll.point[j];
\t clearInterval(clr3);
\t }
\t }, 1);
\t }
\t if ((document.documentElement.scrollTop != undefined) && (document.documentElement.scrollTop > myscroll.point[j])) {
\t var clr4 = setInterval(function() {
\t if (document.documentElement.scrollTop >= myscroll.point[j] + 4) {
\t document.documentElement.scrollTop -= 3;
\t } else {
\t document.documentElement.scrollTop = myscroll.point[j];
\t clearInterval(clr4);
\t }
\t }, 1);
\t }
\t alert(j);
\t }, true);
\t }(j));
\t }#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>
htmlでも投稿できますか？ – Verthosa
@Verthosa私のウェブサイトのHTMLコード全体を投稿したいですか？ – user31782
私の前の投稿と同じように、私のコードのワイヤフレーム版を投稿することができます：http://stackoverflow.com/q/37298414/3429430 – user31782