你的位置:首页 > Java教程

[Java教程]点击返回顶部代码具有缓冲效果


点击返回顶部代码具有缓冲效果:
在很多网站,尤其是页面比较长的网站,都有点击返回顶部这个按钮,一般位置在页面的右下角。
这个功能有效的提高了网站的用户体验度,有效避免了人为拖动滚动条返回顶部之苦,下面就通过一段代码实例简单介绍一下如何实现此效果,代码实例如下:

 

<!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/