返回頁面頂部top按鈕通過錨點實現(自寫)

2019-11-20 22:21:00

字體：大中小

來源：轉載

供稿：網友

實現了我的小跳槽以后，從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樣式。

效果圖：