点击返回顶部代码具有缓冲效果:
在很多网站,尤其是页面比较长的网站,都有点击返回顶部这个按钮,一般位置在页面的右下角。
这个功能有效的提高了网站的用户体验度,有效避免了人为拖动滚动条返回顶部之苦,下面就通过一段代码实例简单介绍一下如何实现此效果,代码实例如下:
<!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>
以上代码实现了我们需要的功能,在默认状态下返回顶部按钮时隐藏的,当向下拖动一定距离之后才会以动画方式显示,点击按钮可以以缓冲方式返回顶部,然后将返回顶部按钮隐藏。具体实现过程这里级不做介绍了,套用就可以,如有任何问题可以跟帖留言。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9110
更多内容可以参阅:http://www.softwhy.com/javascript/
原标题:点击返回顶部代码具有缓冲效果
关键词: