如何覆盖定位元素的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');