Return to the top is often seen, the code is relatively simple, using two objects and a main function. It has clear responsibilities to facilitate reuse. In terms of performance, it considers the performance problems caused by frequent calls to callback functions due to the continuous triggering of onscroll events. You can cache the callback function for a period of time and then execute it. That is, when the onscroll event is triggered multiple times during this period, the callback function will only be executed once.
The Code is as follows:
Return top function based on fade-in, fade-out, and deceleration Effects
Back to Top
Script
Var tool = {
// This method is performed multiple times to avoid performing func within the MS period. Commonly used continuity events such as resize, scoll, and mousemove
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 elements */
Opacity: function (elem, val ){
Var setting = arguments. length> 1;
If ("opacity" in elem. style) {// elem. style ["opacity"] cannot read the value 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;
}
}
},
// Obtain or set the scrollTop of the Document Object
// Function ([val])
DocumentScrollTop: function (val ){
Var elem = document;
Return (val! = Undefined )?
Elem.doc umentElement. scrollTop = elem. body. scrollTop = val:
Math.max(elem.doc umentElement. scrollTop, elem. body. scrollTop );
}
};
// Animation effect
Var effect = {
// Fade in
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 );
},
// Fade 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 );
},
// Slow down and move the scroll bar
Move: function (scrollTop ){
SetTimeout (function (){
ScrollTop = Math. floor (scrollTop * 0.65 ));
Tool.doc umentScrollTop (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.doc umentScrollTop ();
If (scrollTop> 0 ){
If (! Visible ){
Effect. fadein (elem)
Visible = true;
}
} Else {
If (visible ){
Effect. fadeout (elem );
Visible = false;
}
}
}
Function onclick (){
Var scrollTop = tool.doc umentScrollTop ();
Effect. move (scrollTop );
}
Elem. onclick = onclick;
Window. onscroll = tool. buffer (onscroll, 200, this );
})();
Script
Placeholder
Compatibility and bugs problems:
1 opacity: function (elem, val ){
If (val) {// This method generates a BUG when 0 is passed and the string is null.
2: document.doc umentElement. scrollTop chrome cannot get the value.
3: elem. style. opacity cannot read the value defined in CSS Class.
4: IE6 does not support fixed locating, although it can be simulated using absolute. However, many websites have degraded the website.
