如何覆盖锚点元素's href目标，并在我点击转到目标javascript时删除其他错误
How to overwrite anchor element's href target and remove other bugs in my click-to-go-to-target javascript?
我制作了一个网页。我想实现将网页滚动到菜单锚的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。其他帖子说，用onclick返回false将禁用href目标。问题是我没有使用onclick；我正在使用addEventListener("click")。我尝试同时返回false和true，但没有成功。所以，
- 为什么说返回
false会停止锚元素的href功能？现在我知道preventDefault会做我想做的事。但我想知道如何通过返回false来获得相同的结果
现在bug来了。当我点击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>- 如何删除此错误
在事件上使用preventDefault()，以停止要执行的click事件的默认值。
window.addEventListener('scroll', function(e) {
e.preventDefault();
...
然后在处理程序中执行您的操作，最后，使用事件目标的href属性值手动更新window.location。
编辑
回复评论：您的事件仍然是泡沫，只有默认操作被阻止。为了防止它冒泡，有event.stopPropagation()。
事件的默认操作只是将window.location设置为事件目标的href属性的值
window.location = e.target.getAttribute('href');
相关文章：
- Node.js v6.2.0类扩展不是函数错误
- Jquery菜单操作不稳定，定位不正确，存在一般错误
- 如何覆盖锚点元素's href目标，并在我点击转到目标javascript时删除其他错误
- 未捕获的类型错误:无法读取未定义的属性“目标”
- 主干/下划线 js “太多递归”和“检查目标崩溃”错误
- 未知的目标实体属性错误
- 铬错误或编码错误?目标页面中的锚/ID 链接不起作用
- 包装视频标记的超链接 - 为点击处理程序设置了错误的目标
- Emberjs控制器目标指向错误的路线
- 按下带有html标签的html按钮时出现错误目标
- Magento所见即所得编辑器错误:找不到内容更新的目标元素
- javascript表单第二次提交到错误的目标
- 在ReactJS中传递道具，它们不会加载，同时接收到目标容器错误
- OnMouseMove拖拽，目标错误拦截事件
- SCRIPT 600错误:此操作的目标元素无效
- 当目标在ID内时，通过名称获取元素不工作.getelementsbytagname不是函数错误
- React Uncaught错误:不变冲突:_registerComponent(..）:目标容器不是DOM元素
- 在ng-click中得到错误的目标对象
- ReactJS-弹出窗口组件错误:目标容器不是DOM元素
- IE js事件错误.目标! = =
