javascript - 为什么设置了鼠标滚轮事件后，点击的时候会跳到顶部呢？
本文介绍了javascript - 为什么设置了鼠标滚轮事件后，点击的时候会跳到顶部呢？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
请教一个问题，如下代码，想做一个效果，让导航栏一直固定在顶部，判断鼠标如果往下滑动的话，就出现background，如果当前页面是是在顶部，就让background消失。我用下面这段代码可以实现，但是点击导航栏的子元素button的时候，不管当时是滑动到哪里，都会跳到顶部，是为什么呢？
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>test</title>
<style type="text/css">
body{
height: 2000px;
}
.div1{
width: 500px;
height: 80px;
position: fixed;
top: 0;
}
li{
list-style: none;
width: 50px;
height: 50px;
background: #000;
color: #fff;
margin-left: 10px;
float: left;
text-align: center;
line-height: 40px;
}
.click{
color: #fff;
line-height: 40px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).bind("scroll",function(){ //鼠标滚轮事件
var top = $(this).scrollTop(); //当前窗口滚动距离
if(top == 0){
$(".div1").css("background","none");
}else{
var scrollFunc = function(e){
var direct = 0;
e = e || window.event;
if(e.wheelDelta){
if (e.wheelDelta < 0) {
$(".div1").css("background","#ccc");
};
}else if(e.detail){
if(e.detail < 0){
$(".div1").css("background","#ccc");
};
};
ScrollText(direct);
};
//给页面绑定滑轮事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll',scrollFunc,false);
};
//滚动滑轮事件触发scrollFunc函数
window.onmousewheel = document.onmousewheel = scrollFunc;
}
})
});
</script>
</head>
<body>
<div class="div1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li><a href="#" class="click">button</a></li>
</ul>
</div>
</body>
</html>
解决方案
<a href="javascript:;" class="click">button</a>链接有默认行为，加’#‘也是跳转到本页，取消这个默认行为 改成上面代码
这篇关于javascript - 为什么设置了鼠标滚轮事件后，点击的时候会跳到顶部呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
