返回頁面頂部top按鈕通過錨點實現(自寫)
編輯：關於JavaScript
實現了我的小跳槽以後，從8月7號入職了現在的這家公司，我好像是加入了救火隊的行列，還沒有開始開發新的模塊，只是一直在實現已經上線模塊中的新需求，有時候也真想問問，某些用戶的腦子是不是進水了，提出來的需求只想讓人大笑三聲。。。幸好項目組做需求的姐姐工作經驗十分豐富，能夠很好地和用戶協調，讓我們這些開發人員也沒那麼辛苦~
用戶在使用系統時，會有很多表單的操作，然而很多表單都是裹腳布啊，長啊長~
所以就需要一個返回頁面頂部的top按鈕啦~
雖然說網上的方法有很多種，但是未免過於繁瑣。左一個判斷又一個定位，總之，太麻煩啦~前人的代碼拿來就用有時候是節約時間，但還是要根據系統的性能來綜合考慮，為了不給浏覽器以及服務器帶來不必要的壓力，我還是決定自己寫一個top按鈕~
在<head>標簽中加入到頁面頂部的錨點：
復制代碼 代碼如下:
a id="_top"></a>
在<body>的最末尾加入js代碼（用div實現）：
復制代碼 代碼如下:
<script type="text/javascript">
function form_top(){
document.write('<div id="form_top"><a href="#_top" title="回到頂部"><div class="top_img"></div></a></div>')
}
form_top();
</script>
設置top按鈕的css樣式（讓div始終在頁面右下角）：
復制代碼 代碼如下:
#form_top{display:block; bottom:3px; right:3px; position:fixed;}
.top_img{
background-image: url("img/top.png");
width: 40px;
height:40px;
cursor: pointer;
}
最後，別忘了在jsp頁面中引入css樣式。
效果圖：
用戶在使用系統時，會有很多表單的操作，然而很多表單都是裹腳布啊，長啊長~
所以就需要一個返回頁面頂部的top按鈕啦~
雖然說網上的方法有很多種，但是未免過於繁瑣。左一個判斷又一個定位，總之，太麻煩啦~前人的代碼拿來就用有時候是節約時間，但還是要根據系統的性能來綜合考慮，為了不給浏覽器以及服務器帶來不必要的壓力，我還是決定自己寫一個top按鈕~
在<head>標簽中加入到頁面頂部的錨點：
復制代碼 代碼如下:
a id="_top"></a>
在<body>的最末尾加入js代碼（用div實現）：
復制代碼 代碼如下:
<script type="text/javascript">
function form_top(){
document.write('<div id="form_top"><a href="#_top" title="回到頂部"><div class="top_img"></div></a></div>')
}
form_top();
</script>
設置top按鈕的css樣式（讓div始終在頁面右下角）：
復制代碼 代碼如下:
#form_top{display:block; bottom:3px; right:3px; position:fixed;}
.top_img{
background-image: url("img/top.png");
width: 40px;
height:40px;
cursor: pointer;
}
最後，別忘了在jsp頁面中引入css樣式。
效果圖：
小編推薦
熱門推薦