javascript - 为什么设置了鼠标滚轮事件后，点击的时候会跳到顶部呢？-PHP中文网问答

请教一个问题，如下代码，想做一个效果，让导航栏一直固定在顶部，判断鼠标如果往下滑动的话，就出现background，如果当前页面是是在顶部，就让background消失。我用下面这段代码可以实现，但是点击导航栏的子元素button的时候，不管当时是滑动到哪里，都会跳到顶部，是为什么呢？

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8" />
    <title>test</title>
    <style type="text/css">
        body{
            height: 2000px;
        }
        .p1{
            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){
                    $(".p1").css("background","none");
                }else{
                    var scrollFunc = function(e){    
                    var direct = 0;
                    e = e || window.event;
                    if(e.wheelDelta){           
                        if (e.wheelDelta < 0) {  
                            $(".p1").css("background","#ccc");
                        }; 
                    }else if(e.detail){   
                        if(e.detail < 0){  
                            $(".p1").css("background","#ccc");
                        };
                    };
                    ScrollText(direct);
                    };
                    //给页面绑定滑轮事件
                    if (document.addEventListener) {
                        document.addEventListener('DOMMouseScroll',scrollFunc,false);
                    };
                    //滚动滑轮事件触发scrollFunc函数
                    window.onmousewheel = document.onmousewheel = scrollFunc;
                    }
                })
        });
    </script>
</head>
<body>
    <p class="p1">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li><a href="#" class="click">button</a></li>
        </ul>
    </p>
</body>
</html>