The performance problems caused by the frequent invocation of callback functions due to the continuous triggering of onscroll events are considered in terms of performances. The callback function can be cached for a period of time, that is, the onscroll event is triggered more than once during this period, but the callback function is executed only once.
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "gb2312"/>
<title> return top function with fade/fade/deceleration motion effect </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>
<body>
<div id= "Gotop" class= "fixed" >
Back to Top
</div>
<script>
var tool = {
This method avoids multiple execution of Func during Ms period. Common resize, Scoll, MouseMove and other continuous events
Buffer:function (func, MS, context) {
var buffer;
return function () {
if (buffer) return;
Buffer = settimeout (function () {
Func.call (This)
buffer = undefined;
},MS);
};
},
/* Read or set the transparency of the element * *
Opacity:function (Elem, Val) {
var setting = arguments.length > 1;
if ("opacity" in Elem.style) {//elem.style["opacity"] cannot read values in 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;
}
}
},
Gets or sets the scrolltop of the Document object
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);
}
};
Animation effects
var effect = {
Fade
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);
},
Out
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);
},
Deceleration move scroll bar
Move:function (scrolltop) {
settimeout (function () {
ScrollTop = Math.floor ((scrolltop * 0.65));
Tool.documentscrolltop (scrolltop);
if (scrolltop!=0) {
SetTimeout (Arguments.callee, 25);
}
},25);
}
};
Main program
(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, this);
})();
</script>
<div class= "placeholder" >placeholder</div>
</body>
Compatibility and bugs related issues:
1 opacity:function (Elem, Val) {
if (val) {//Use this method of judgment when passing 0, an empty string will produce a bug.
2:document.documentelement.scrolltop Chrome cannot get a value.
The value defined in CSS class is not read by 3:elem.style.opacity.
4:IE6 does not support fixed positioning, although absolute emulation can be used. But there are a lot of websites that have been degraded.
