JavaScript returns top source code

Source: Internet
Author: User
Tags bind

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.