Common effect implementation: return to top (combined with fade-in, fade-out, slow-down scrolling)

Common effect implementation: return to top (combined with fade-in, fade-out, slow-down scrolling)_javascript skills

WBOY

Release： 2016-05-16 17:57:42

Original

1301 people have browsed it

In terms of performance, we consider the performance issues caused by continuously triggering onscroll events and frequently calling callback functions. The callback function can be cached for a period of time and then executed, that is, when the onscroll event is triggered multiple times during this period, the callback function will only be executed once.

Copy code The code is as follows:

Return to top function combined with fade-in/fade-out/deceleration motion effects

Back to top

<script> <br>var tool = { <br>//This method is to avoid executing func multiple times within a period of ms. <br>buffer: function(func, ms, context){ <br>var buffer; <br>return function(){ <br>if(buffer) return; <br>buffer = setTimeout(function(){ <br>func.call(this) <br>buffer = undefined; <br>},ms); <br>}; <br>}, <br>/*Read Or set the transparency of the element*/ <br>opacity: function(elem, val){ <br>var setting = arguments.length > 1; <br>if("opacity" in elem.style){//elem. style["opacity"] cannot read the value in CSS class <br>return setting ? elem.style["opacity"] = val : elem.style["opacity"]; <br>}else{ <br> if(elem.filters && elem.filters.alpha) { <br>return setting ? elem.filters.alpha["opacity"] = val*100 : elem.filters.alpha["opacity"]/100; <br> } <br>} <br>}, <br>//Get or set the scrollTop of the document object <br>//function([val]) <br>documentScrollTop: function(val){ <br>var elem = document ; <br>return (val!== undefined) ? <br>elem.documentElement.scrollTop = elem.body.scrollTop = val : <br>Math.max(elem.documentElement.scrollTop, elem.body.scrollTop); <br>} <br>}; <br>//Animation effect<br>var effect = { <br>//Fade in<br>fadein: function (elem){ <br>var val = 0; <br> var interval = 25; <br>setTimeout(function(){ <br>val = 0.1; <br>if(val>1){ <br>tool.opacity(elem, 1) <br>return; <br> }else { <br>tool.opacity(elem, val) <br>setTimeout(arguments.callee, interval); <br>} <br>},interval); <br>}, <br>//fade out<br>fadeout: function (elem){ <br>var val = 1; <br>var interval = 25; <br>setTimeout(function(){ <br>val -= 0.1; <br>if(val < 0){ <BR>tool.opacity(elem, 0) <BR>return; <BR>}else { <BR>tool.opacity(elem,val); <BR>setTimeout(arguments.callee, interval); <BR>} <BR>},interval); <BR>}, <BR>//Slow down the moving scroll bar<BR>move: function(scrollTop){ <BR>setTimeout(function(){ <BR>scrollTop = Math .floor((scrollTop * 0.65)); <BR>tool.documentScrollTop(scrollTop); <BR>if(scrollTop !=0 ){ <BR>setTimeout(arguments.callee, 25); <BR>} <BR> },25); <BR>} <BR>}; <BR>//Main program<BR>(function(){//gotop <BR>var visible = false; <BR>var elem = document.getElementById( "gotop"); <BR>function onscroll(){ <BR>var scrollTop = tool.documentScrollTop(); <BR>if(scrollTop > 0){ <br>if(!visible){ <br>effect. fadein(elem) <br>visible = true; <br>} <br>}else{ <br>if(visible){ <br>effect.fadeout(elem); <br>visible = false; <br>} <br>} <br>} <br>function onclick(){ <br>var scrollTop = tool.documentScrollTop(); <br>effect.move(scrollTop); <br>} <br>elem.onclick = onclick ; <br>window.onscroll = tool.buffer(onscroll, 200, this); <br>})(); <br></script> 
placeholder< /div> 
 
Compatibility and bugs related issues: 
1 opacity: function(elem, val){ 
　if(val){//Using this judgment method will cause BUG when passing 0 or empty string. 
2: document.documentElement.scrollTop chrome cannot get the value. 
3: elem.style.opacity cannot read the value defined in CSS Class. 
4: IE6 does not support fixed positioning, although absolute simulation can be used. However, many websites have downgraded it.