社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 返回頁面頂部top按鈕透過錨點實作(自寫)_javascript技巧

返回頁面頂部top按鈕透過錨點實作(自寫)_javascript技巧

WBOY
發布： 2016-05-16 17:23:49
原創
1172 人瀏覽過

實現了我的小跳槽以後，從8月7號入職了現在的這家公司，我好像是加入了救火隊的行列，還沒有開始開發新的模組，只是一直在實現已經上線模組中的新需求，有時候也真想問，某些用戶的腦子是不是進水了，提出來的需求只想讓人大笑三聲。 。 。幸好專案組做需求的姐姐工作經驗十分豐富，能夠很好地和用戶協調，讓我們這些開發人員也沒那麼辛苦~

用戶在使用系統時，會有很多表單的操作，然而很多表單都是裹腳布啊，長啊長~

所以就需要一個返回頁面頂部的top按鈕啦~

雖然說網上的方法有很多種，但是未免過於繁瑣。左一個判斷又一個定位，總之，太麻煩啦~前人的代碼拿來就用有時候是節約時間，但還是要根據系統的性能來綜合考慮，為了不給瀏覽器以及服務器帶來不必要的壓力，我還是決定自己寫一個top按鈕~

在

標籤中加入到頁面頂部的錨點：
複製程式碼 程式碼如下:

a id="_top">

在的最末尾加入js程式碼（用div實作）：
複製程式碼 程式碼如下:

')
}
form_top();


設定top按鈕的css樣式（讓div總是在頁面右下角）：
複製程式碼 程式碼如下:

form_top{displayform_top{displayform_top{ :block; bottom:3px; right:3px; position:fixed;}
.top_img{
background-image: url("img/top.png");
width: 40px;
height:40px;
cursor: pointer;
}

最後，別忘了在jsp頁面中引入css樣式。

效果圖：
返回頁面頂部top按鈕透過錨點實作(自寫)_javascript技巧
相關標籤：
回到頂部
來源：php.cn
上一篇：jQuery動態新增刪除select項目(實作碼)_jquery 下一篇：js Math 物件的方法_基礎知識
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
傳回值中變數的格式是什麼？ 我是php的新學習者。我發現有一段程式碼：if($x<time()){return[false,'error'];}邏輯或變數並不重要，但我不明白[false,'error'...
來自於 2024-04-06 21:55:20
0
1
778
取得輸入欄位的總回傳值方法 我正在嘗試尋找用戶輸入的總價值。得到將數字與其相同值相乘的聚合letDem200=document.querySelector(".input_200");le...
來自於 2024-04-06 18:19:37
0
1
380
實體倉庫擴展了JpaRepository<Entity, Id>和JpaSpecificationExecutor<Entity>，EntitySpec擴展了Specification<Entity> 這是我的端點http://localhost:8080/country/all回复所有國家都可以當我想過濾它們時返回未找到國家為空並返回異常thrownewRecordNotFou...
來自於 2024-04-06 17:11:03
0
1
421
使用Eloquent進行內部查詢 圖像位址包含位置和用戶總數。 Users::with(['address'=>function($query){$query->where('location','NA...
來自於 2024-04-06 16:45:50
0
1
515
使用 Javascript / Jquery 提交表單且不含按鈕 我試圖透過呼叫JavaScript函數並使用JQUERY/PHP執行表單來提交沒有按鈕的表單。我希望表單在後端靜默執行，而無需重新載入頁面。不幸的是，它不斷傳回JavaScript...
來自於 2024-04-06 14:54:03
0
2
421
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板