你的位置:首页 > Java教程

[Java教程]自定义置顶TOP按钮


简述一下,分为三个步骤:


1. 添加Html代码

2. 调整Css样式

3. 添加Jquery代码



具体代码如下:


<style type="text/css">
  #GoTop{
                width:40px;
                height:40px;
                background-color:#F59E1D;
                position:fixed;
                bottom:30px;
                right:30px;
                font-size:19pt;
                text-align:center;
                color:#FFF;
                text-decoration:none;
            }
</style>

<div>
  <a id="GoTop" onclick="GoTopFunction()" href="javascript:void(0)">∧</a>
</div>

<script type="text/javascript">
            $(document).ready(function(){
                $("#GoTop").mouseenter(
                    function(){
                        $("#GoTop").css("color","#FFF");
                        $("#GoTop").css("background-color","#F3D117");
                        $("#GoTop").css("text-decoration","none");
                    }
                );
                $("#GoTop").mouseleave(
                    function(){
                        $("#GoTop").css("color","#FFF");
                        $("#GoTop").css("background-color","#F59E1D");
                        $("#GoTop").css("text-decoration","none");
                    }
                );
            });

    var sth;
            function GoTopFunction(){
                FourLeafCloverZCVar=setInterval(GoTopFunctionEachScrollBy,10);    
            }

            function GoTopFunctionEachScrollBy(eachHeight){

                //判断是否存在以下两个实例
                if(document.documentElement && document.documentElement.scrollTop)
                {
                    if(document.documentElement.scrollTop<=0){
                        clearInterval(sth);
                    }else{
                        window.scrollBy(0,-25);
                    }
                }else{                                                           
                    if(document.body.scrollTop<=0){
                        clearInterval(sth);
                    }else{
                        window.scrollBy(0,-25);
                    }
                }
            }
</script>

 
值得注意:


 

1. <a>标签中的javascript:void(0),平常见到的是href="#",而这不是,这里的意思大概可以理解不设置任何操作,即页面置顶后无需自动刷新界面。2. 鼠标滑过事件:用mouseenter、mouseover还是mousemove?

hover是指分别当鼠标指针进入和离开元素时被执行的事件相当于mouseenter+mouseleave。
mouseover鼠标进入某个元素或其子元素时触发。

mousemove如你所说只要鼠标移动,哪怕只有1像素就会触发。
因为用户在浏览网页的过程中,鼠标是会不停移动的,所以一旦绑定这个事件,网页就会不停的执行mousemove所绑定的响应函数,消耗系统资源,这里的系统资源是指客户端的。

(可参考mouseover和mouseenter的区别:http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover)
3. document.documentElement.scrollTop 具体解释可以看这里:http://blog.csdn.net/huang100qi/article/details/5950894