星空网 > 软件开发 > 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/

 




原标题:点击返回顶部代码具有缓冲效果

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

选品逻辑:https://www.goluckyvip.com/tag/11356.html
第三方软件:https://www.goluckyvip.com/tag/11357.html
旺季临近:https://www.goluckyvip.com/tag/11359.html
一文说清~:https://www.goluckyvip.com/tag/1136.html
成人用品:https://www.goluckyvip.com/tag/11360.html
货物延期:https://www.goluckyvip.com/tag/11361.html
安能物流的2024:变革不能停:https://www.kjdsnews.com/a/1836480.html
深圳中心公园朱顶红花海位置(在哪里+怎么去):https://www.vstour.cn/a/364175.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流