Usage: Call the JS code directly on the page.
<script type= "Text/javascript" src= "Js/scrolltopcontrol.js" ></script>
Js:
var scrolltotop={
setting:{
STARTLINE:100,//start line
scrollto:0,//scroll to the specified position
scrollduration:400,//Rolling transition time
FADEDURATION:[500,100]//Fade out fades
},
controlhtml: ' controlattrs:{offsetx:30,offsety:80},//return button Fixed position
Anchorkeyword: "#top",
state:{
Isvisible:false,
Shouldvisible:false
},scrollup:function () {
if (!this.cssfixedsupport) {
this. $control. css ({opacity:0});
}
var Dest=isnan (This.setting.scrollto) this.setting.scrollto:parseInt (This.setting.scrollto);
if (typeof dest== "string" &&jquery ("#" +dest). Length==1) {
Dest=jquery ("#" +dest). Offset (). Top;
}else{
dest=0;
}
this. $body. Animate ({scrolltop:dest},this.setting.scrollduration);
},keepfixed:function () {
var $window =jquery (window);
var controlx= $window. ScrollLeft () + $window. Width ()-this $control. Width ()-this.controlattrs.offsetx;
var controly= $window. scrolltop () + $window. Height ()-this. $control. Height ()-this.controlattrs.offsety;
this. $control. css ({left:controlx+ "px", top:controly+ "px"});
},togglecontrol:function () {
var scrolltop=jquery (window). scrolltop ();
if (!this.cssfixedsupport) {
This.keepfixed ();
}
This.state.shouldvisible= (scrolltop>=this.setting.startline) True:false;
if (this.state.shouldvisible&&!this.state.isvisible) {
this. $control. Stop (). Animate ({opacity:1},this.setting.fadeduration[0]);
This.state.isvisible=true;
}else{
if (this.state.shouldvisible==false&&this.state.isvisible) {
this. $control. Stop (). Animate ({opacity:0},this.setting.fadeduration[1]);
This.state.isvisible=false;
}
}
},init:function () {
JQuery (document). Ready (function ($) {
var mainobj=scrolltotop;
var Iebrws=document.all;
mainobj.cssfixedsupport=!iebrws| | iebrws&&document.compatmode== "Css1compat" &&window. XMLHttpRequest;
Mainobj. $body = (window.opera)? (document.compatmode== "Css1compat"? $ ("HTML"): $ ("Body")): $ ("html,body");
Mainobj. $control =$ (' <div id= ' Topcontrol ' > ' +mainobj.controlhtml+ ' </div> '). CSS ({position: Mainobj.cssfixedsupport? " Fixed ":" Absolute ", Bottom:mainobj.controlattrs.offsety,right:mainobj.controlattrs.offsetx,opacity:0,cursor:" Pointer "}). attr ({title:" Return to Top "}). Click (function () {mainobj.scrollup (); return false;}). AppendTo ("body"); if (Document.all&&!window. Xmlhttprequest&&mainobj. $control. Text ()! = "") {mainobj. $control. css ({width:mainobj. $control. Width ()});} Mainobj.togglecontrol ();
$ (' a[href= ' ' +mainobj.anchorkeyword+ ' "] '). Click (function () {mainobj.scrollup (); return false;});
$ (window). bind ("Scroll resize", function (e) {Mainobj.togglecontrol ();});
});
}
};
Scrolltotop.init ();
Source: http://97zzw.com/97 Webmaster Network
Back to the top of the compatible JS code