常见效果实现之返回顶部(结合淡入、淡出、减速滚动)

在性能方面考虑了由于连续触发onscroll事件，频繁调用回调函数而产生的性能问题。可以将回调函数缓存一段时候后执行，即当这段时间内多次触发了onscroll事件，但回调函数只会执行一次。复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>结合淡入/淡出/减速运动效果实现的返回顶部功能</title> <style> .fixed{ position:fixed; bottom:100px; width:20px; right:100px; height:80px; font-size:12px; 　　　　 cursor:pointer; background-color:#ccc; opacity:0; filter: alpha(opacity=0); } .placeholder{ height:2000px;} </style> </head> <body> <div id="gotop" class="fixed"> 返回顶部 </div> <script> var tool = { //此方法为了避免在 ms 段时间内，多次执行func。常用 resize、scoll、mousemove等连续性事件中 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){//elem.style["opacity"] 读取不到CSS class中的值 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; } } }, //获取或设置文档对象的scrollTop //function([val]) 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(){//gotop 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); })(); </script> <div class="placeholder">placeholder</div> </body> </html> 兼容性和bugs相关问题： 1 opacity: function(elem, val){ 　　if(val){//使用这种判断方式当传0，空字符串时会产生BUG 。 2：document.documentElement.scrollTop chrome取不到值。 3： elem.style.opacity 读取不到在CSS Class中定义的值。 4：IE6不支持fixed定位，虽然可以使用absolute模拟。不过很有很多网站都它进行了降级处理。

　　推荐阅读

　　DOM和XMLHttpRequest对象的属性和方法整理

标准XMLHttpRequest操作方法描述 abort() 停止当前请求 getAllResponseHeaders() 把HTTP请求的所有响应的首部作为建/值返回 getResponseHeader(“header”) 返回指定首部的串值 open(String “>>>详细阅读

本文标题：常见效果实现之返回顶部(结合淡入、淡出、减速滚动)

地址：http://www.17bianji.com/kaifa2/JS/23765.html

1/2 1