In terms of performance, the performance problems caused by frequent calls to the callback function due to the continuous triggering of onscroll events are considered. 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.
Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<Meta charset = "gb2312"/>
<Title> return to the top by combining the fade-in, fade-out, and deceleration effects </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>
</Head>
<Body>
<Div id = "gotop" class = "fixed">
Back to Top
</Div>
<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>
<Div class = "placeholder"> placeholder </div>
</Body>
</Html>
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.
