在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮。
效果演示可以查看本页。如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条。点击这里“返回顶部”字样的按钮后,页面就像是抹了润滑剂一样,倏地一声就滑到顶部了,同时,该点击按钮也玩起了躲猫猫 – 不见了。
效果演示
JavaScript 代码
<script type="text/javascript"> 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>