Here's how to use it:
1. Default: In plain text "↑ TOP" show
var mytop = new Xttop ();
2. Call Picture:
var mytop =new xttop ({img: Picture path});
Like I'm going to call a picture of the outreach
var mytop =new xttop ({img: "Http://www.111cn.net"});
Of course more of your picture size "> Picture size you have to set the width of the mytop
var mytop =new xttop ({img: "http://www.111cn.net", Height: "The height of your picture", Width: "Picture width"});
3. Other parameter selection:
I set the bottom value and the right value by default to be 10px, which is the position shown in the lower right-hand corner. Can change the size of the value according to your preferences
Speed speed The default value is 35, can be based on your favorite appropriate adjustments recommended not more than 100, otherwise there will be no sliding effect .... Of course, if you must fly up ... then I have no choice.
var mytop =new xttop ({img: "http://www.111cn.net", Height: "The height of your picture", Width: "Picture width", bottom: "50px", Right: "50px", speed:50}) ;
Xttop.js Source code:
(function (docu) {
var objxttop = null; Topdiv objects
var xttop = function (Topjason) {
var doc = document,
Docbody = Doc.body,
Goto_top_type =-1,//Record browser type
GOTO_TOP_ITV = 0,
Isnotie =-[-1,]; The world's shortest judgment ie browser, non IE browser for 1,ie for Nan
Config = Topjason | | {};
var topdiv = doc.createelement ("div");
Topdiv.id = config["id" | | "Xttop"; Topdiv set ID, default is xttop, to avoid conflicts, please set your own
Topdiv style
Topdiv.style.css Tutorial Text = "Position:fixed;bottom:" + (config["Bottom"] | | " 10px ") +"; Right: "+ (config[" right "] | |" 10px ") +";d isplay:none;width: "+ (config[" width "] | |" 40px ") +"; Height: "+ (config[" height "] | |" 19px ") +"; ";
if (config["img"]) {
topdiv.style.background = "url (" + (config["img"] = = "Defaults"? Http://www.exiatian.com/wp-content/themes/thunder/images/top.png ": config[" img "]) +" no-repeat "; Plus background picture
} else {
topdiv.innerhtml = "<span style= ' color: #7B8693; font-size:12px;border:1px solid #7B8693; ' >↑ top </span> "; Default to text display
}
function Goto_top_timer () {
var y = docbody.scrolltop| | Doc.documentElement.scrollTop;
var moveby = config["Speed"] | | 35;
Y-= Math.ceil (Y * moveby/100); To slow down evenly
if (Y < 0) {
y = 0;
}
if (docbody.scrolltop) {
Docbody.scrolltop = y;
} else {
Doc.documentElement.scrollTop = y;
}
if (y = = 0) {
Clearinterval (GOTO_TOP_ITV);
GOTO_TOP_ITV = 0;
}
}
function Goto_top () {
if (Goto_top_itv = = 0) {
GOTO_TOP_ITV = SetInterval (Goto_top_timer, 50);
}
}
Bind (Topdiv, "click", Goto_top);
Docbody.appendchild (TOPDIV);
}
var bind = function (object, type, fn) {
if (object.attachevent) {//ie browser
Object.attachevent ("On" + Type, (function () {
return function () {
Window.event.cancelBubble = true; Stop Time bubbling
Object.attachevent = Fn.apply (object);
}
}) (object);
else if (Object.addeventlistener) {//other browser
Object.addeventlistener (Type,
function (event) {
Event.stoppropagation (); Stop Time bubbling
Fn.apply (This)
},
FALSE);
}
}
var scrollevent = function () {
Objxttop = Objxttop | | document.getElementById ("Xttop");
if (Document.documentElement.scrollTop > | | document.body.scrollTop > 120)//when IE or other browser scroll bar value is greater than 120, top display
{
Objxttop.style.display = "block";
' Else//less than 120, top hidden
{
Objxttop.style.display = "None";
}
}
Window.xttop = Xttop;
Window.onscroll = scrollevent; Binding scroll Bar Events
})();
Save the above code JS file and then import to your page can be realized oh.