如何覆蓋定位元素的href目標並刪除我的點擊目標Javascript中的其他錯誤？

Question

我做了一個網頁。 我想實現將網頁滾動到菜單錨的href目標位置的功能。 我的代碼如下

  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() { 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> 

因此，代碼無法實現預期的功能。 如果我們刪除菜單的錨標簽的href屬性，則代碼將按預期工作，但存在一個錯誤。 href標記的問題在於，在onclick函數可以執行任何操作之前，網頁會快速滾動到href target 。 其他帖子說ont將returntning設置為false會禁用href目標。 問題是我沒有使用onclick ; 我正在使用addEventListener("click") 。 我嘗試返回false和true但沒有任何效果。 所以，

• 為什么說返回false停止錨元素的href函數？ 現在，我知道preventDefault將滿足我的要求。 但是我想知道如何通過返回false來達到相同的效果。

現在出現了錯誤。 當我單擊contact鏈接時，它會向下滾動到頁面底部並保持固定。 如果我向上滾動，則頁面會自動滾動到底部。

  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

在事件上使用preventDefault() ，以停止要執行的click事件的默認值。

window.addEventListener('scroll', function(e) {
    e.preventDefault();
    ...

然后在處理程序中執行操作，最后，使用事件目標的href屬性值手動更新window.location 。

編輯

RE評論：您的事件仍然冒泡，僅默認操作被阻止。 為了阻止它冒泡，有event.stopPropagation() 。

您事件的默認操作只是將window.location設置為事件目標的href屬性的值

window.location = e.target.getAttribute('href');