具有彈性的點選返回網頁頂部程式碼
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body { height:3600px; } #goTopBtn { position:fixed; text-align:center; line-height:30px; width:30px; bottom: 5px; height:33px; font-size:12px; cursor:pointer; right:0px; _position:absolute; _right:auto } </style> <script type="text/javascript"> function goTopEx() { var obj = document.getElementById("goTopBtn"); function getScrollTop() { return document.documentElement.scrollTop + document.body.scrollTop; } function setScrollTop(value) { if (document.documentElement.scrollTop) { document.documentElement.scrollTop = value; } else { document.body.scrollTop = value; } } window.onscroll = function() { getScrollTop() > 0 ? obj.style.display = "" : obj.style.display = "none"; } obj.onclick = function() { var goTop = setInterval(scrollMove, 10); function scrollMove() { setScrollTop(getScrollTop() / 1.1); if (getScrollTop() < 1) clearInterval(goTop); } } } </script> </head> <body style="text-align:center"> <div style="display: none" id="goTopBtn"><img border=0 src="img/top.png"></div> <script type="text/javascript"> goTopEx() </script> 超出首屏範圍,即會出現TOP按鈕,否則自動隱藏。 </body> </html>
以上程式碼實現了我們想要的功能,當下拉滾動條的時候能夠出現一個圖片,當地點選此圖片的時候,能夠平滑的回到網頁頂部,下面就簡單介紹一下如何實現此功能。
一.實現原理:
當下拉滾動條的時候,會將點選按鈕設定為顯示,當點選按鈕的時候通過定時器函式不斷的設定scrollTop值,當小於1的時候停止設定(這個時候已經基本返回頂部),這樣就實現了彈性返回頂部的效果。
二.程式碼註釋:
1.var obj = document.getElementById("goTopBtn"),獲取id屬性值為goTopBtn的物件。
2.function getScrollTop(){},獲取滾動條向下拖動的尺寸。
3.return document.documentElement.scrollTop + document.body.scrollTop,用來相容各主流瀏覽器。
4.function setScrollTop(value){},設定滾動的距離,裡面有相容性寫法。
5.window.onscroll = function(){},觸發滾動事件。
6.getScrollTop() > 0 ? obj.style.display = "": obj.style.display = "none",如果已經向下滾動距離大於0,那麼將點選按鈕設定為可見,否則不可見。
7.obj.onclick = function(){},為點選按鈕繫結事件處理函式。
8.var goTop = setInterval(scrollMove, 10),通過定時器函式每隔十秒呼叫一次scrollMove()函式,以此實現彈性上劃效果。
9.function scrollMove(){},用來規定上劃的規則。
10.setScrollTop(getScrollTop() / 1.1),每執行一次scrollMove()函式就設定一次新的scrollTop值。
11.if (getScrollTop() < 1) clearInterval(goTop),如果scrollTop值小於1,就停止定時器函式的執行。
相關文章
- jquery點選返回網頁頂部程式碼jQuery網頁
- 點選返回頂部程式碼具有緩衝效果
- js點選返回網頁頂部程式碼例項詳解JS網頁
- 點選返回網頁頂層效果網頁
- 點選返回頂部效果實現程式碼詳解
- 點選頂部彈出提示層程式碼例項
- js之返回網頁頂部JS網頁
- 網頁頂部導航選單程式碼例項網頁
- CSS-返回頂部程式碼CSS
- js具有跟隨彈性效果的網頁右下角視窗程式碼JS網頁
- 點選返回上一頁程式碼例項
- css實現網頁”回到頂部“的程式碼效果CSS網頁
- 網站返回頂部jquery js實現程式碼方式案例網站jQueryJS
- jquery實現的點選返回頂部和底部特效詳解jQuery特效
- js返回頁面頂部的實現(layui)JSUI
- jquery實現返回頁面頂部功能。jQuery
- js返回頂部JS
- RecyclerView滑動到底部的時候點選按鈕直接返回頂部View
- 網站返回頂部功能視訊網站
- 具有彈性效果的右鍵導航選單
- TesterHome 首頁頂部的導航箭頭點選沒什麼效果
- js實現點選回到頂部JS
- 網頁JS彈出廣告程式碼,頭部,右下角,網頁中漂浮,對聯廣告程式碼等大全網頁JS
- JavaScript返回頂部詳解JavaScript
- 手機直播原始碼,點選按鈕,立即回到頂部原始碼
- 簡單實現點選回到頂部
- 純js實現網頁返回頂部功能(萬能的相容目前所有瀏覽器)JS網頁瀏覽器
- 網頁頂部陰影邊框效果網頁
- HTML5商城開發五實現返回頁面頂部HTML
- 簡單實現具有彈性的ListViewView
- 影片直播網站原始碼,flutter 頂部滾動欄頁面網站原始碼Flutter
- 網頁,網站點選qq圖示,加qq,開啟對方qq的網頁程式碼網頁網站
- div有滾動條 返回頂部
- jQuery返回頂部按鈕詳解jQuery
- 可以固定的頂部的導航選單簡單例項程式碼單例
- 一行程式碼搞定使用LinearLayoutManager一鍵返回頂部行程
- 網頁點選選擇設定文字不同顏色程式碼例項網頁
- 點選彈出鎖屏層例項程式碼