自定義置頂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