點選返回頂部程式碼具有緩衝效果
在很多網站,尤其是頁面比較長的網站,都有點選返回頂部這個按鈕,一般位置在頁面的右下角。
這個功能有效的提高了網站的使用者體驗度,有效避免了人為拖動滾動條返回頂部之苦,下面就通過一段程式碼例項簡單介紹一下如何實現此效果,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>點選返回頂部例項程式碼-螞蟻部落</title> <style type="text/css"> * { margin:0px; padding:0px; } .fixed { position:fixed; bottom:100px; width:20px; right:100px; height:80px; font-size:12px; cursor:pointer; background-color:#F00; } .placeholder { height:2000px; width:20px; margin:0px auto; background-color:green; } </style> <script type="text/javascript"> var tool={ buffer:function(func,ms,context){ var buffer; return function(){ if(buffer) return; buffer=setTimeout(function(){ func.call(this) buffer=undefined; },ms); }; }, /*讀取或設定元素的透明度*/ opacity:function(elem,val){ var setting=arguments.length>1; if("opacity" in elem.style) { return setting ? elem.style["opacity"] = val : elem.style["opacity"]; } else { if(elem.filters && elem.filters.alpha) { return setting?elem.filters.alpha["opacity"]=val*100:elem.filters.alpha["opacity"]/100; } } }, documentScrollTop:function(val){ var elem=document; return (val!==undefined)? elem.documentElement.scrollTop = elem.body.scrollTop = val : Math.max(elem.documentElement.scrollTop, elem.body.scrollTop); } }; //動畫效果 var effect={ fadein:function(elem){ var val=0; var interval=25; setTimeout(function(){ val += 0.1; if(val>1) { tool.opacity(elem, 1) return; } else { tool.opacity(elem, val) setTimeout(arguments.callee, interval); } },interval); }, fadeout:function(elem){ var val=1; var interval=25; setTimeout(function(){ val -= 0.1; if(val < 0) { tool.opacity(elem, 0) return; } else { tool.opacity(elem,val) ; setTimeout(arguments.callee, interval); } },interval); }, move:function(scrollTop){ setTimeout(function(){ scrollTop = Math.floor((scrollTop * 0.65)); tool.documentScrollTop(scrollTop); if(scrollTop !=0 ) { setTimeout(arguments.callee, 25); } },25); } }; function doScroll(){ var visible=false; var elem=document.getElementById("gotop"); function onscroll(){ var scrollTop = tool.documentScrollTop(); if(scrollTop > 0) { if(!visible) { effect.fadein(elem) visible = true; } } else { if(visible) { effect.fadeout(elem); visible = false; } } } function onclick() { var scrollTop = tool.documentScrollTop(); effect.move(scrollTop); } elem.onclick = onclick; window.onscroll = tool.buffer(onscroll, 200, this); } window.onload=function() { doScroll(); } </script> </head> <body> <div id="gotop" class="fixed">返回頂部</div> <div class="placeholder">螞蟻部落歡迎您,我很長的,可以向下拖動檢視效果</div> </body> </html>
以上程式碼實現了我們需要的功能,在預設狀態下返回頂部按鈕時隱藏的,當向下拖動一定距離之後才會以動畫方式顯示,點選按鈕可以以緩衝方式返回頂部,然後將返回頂部按鈕隱藏。具體實現過程這裡級不做介紹了,套用就可以,如有任何問題可以跟帖留言。
相關文章
- 具有彈性的點選返回網頁頂部程式碼網頁
- 點選返回頂部效果實現程式碼詳解
- jquery點選返回網頁頂部程式碼jQuery網頁
- 點選返回網頁頂層效果網頁
- js點選返回網頁頂部程式碼例項詳解JS網頁
- CSS-返回頂部程式碼CSS
- 具有緩衝效果的側欄展開客服系統
- 點選頂部彈出提示層程式碼例項
- [前端外掛] js返回頂部 效果實現前端JS
- jquery實現的點選返回頂部和底部特效詳解jQuery特效
- jQuery頂部帶有選項卡的焦點圖效果jQuery
- js返回頂部JS
- jQuery 緩衝效果二級導航下拉選單jQuery
- RecyclerView滑動到底部的時候點選按鈕直接返回頂部View
- 網站返回頂部jquery js實現程式碼方式案例網站jQueryJS
- css實現網頁”回到頂部“的程式碼效果CSS網頁
- 跟隨滾動條漂浮的返回頂部按鈕效果
- js實現點選回到頂部JS
- JavaScript返回頂部詳解JavaScript
- TesterHome 首頁頂部的導航箭頭點選沒什麼效果
- 固定於頂部緩慢下拉且可以定時消失的廣告效果
- 手機直播原始碼,點選按鈕,立即回到頂部原始碼
- 簡單實現點選回到頂部
- 網頁頂部導航選單程式碼例項網頁
- 點選返回上一頁程式碼例項
- js之返回網頁頂部JS網頁
- js頂部可以伸縮的導航選單效果JS
- javascript緩衝運動程式碼例項JavaScript
- javascript緩衝運動框架程式碼分析JavaScript框架
- JavaScript點選投票效果程式碼例項JavaScript
- 直播軟體搭建,vue3 頁面回到頂部(平緩滾動效果)Vue
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- 網站返回頂部功能視訊網站
- div有滾動條 返回頂部
- jQuery返回頂部按鈕詳解jQuery
- 一行程式碼搞定使用LinearLayoutManager一鍵返回頂部行程
- jQuery點選滑出層效果程式碼例項jQuery
- jQuery文字從頂部掉落效果jQuery