The webpage content is too long to return the code at the top, and the webpage content returns to the top

The webpage content is too long to return the code at the top, and the webpage content returns to the top
1. <a id = "gotopbtn" style = "position: fixed; width: 12px; bottom: 45px; right: 150px; display: none; cursor: pointer; "> Back to Top </a>
<Script>
Var backTop = function (btnId ){
Var btn = document. getElementById (btnId); var d = document.doc umentElement | document. body;
Window. onscroll = set;
Btn. onclick = function (){
Btn. style. display = "none ";
Window. onscroll = null;
This. timer = setInterval (function (){
// Console. log (document. body. scrollTop)
// Lele.log(document.doc umentElement. scrollTop)
If (document. body. scrollTop ){
Document. body. scrollTop-= Math. ceil (document. body. scrollTop * 0.1 );
} Else {
Document.doc umentElement. scrollTop-= Math.ceil(document.doc umentElement. scrollTop * 0.1 );
} If (document. body. scrollTop = 1) clearInterval (btn. timer), window. onscroll = set, document. body. scrollTop = 0;
If (document.doc umentElement. scrollTop = 1) clearInterval (btn. timer), window. onscroll = set, document.doc umentElement. scrollTop = 0;
}, 10 );
};
Function set () {btn. style. display = (document.doc umentElement. scrollTop | document. body. scrollTop )? 'Block': "none "}
};
BackTop ('gopbtn ');

</Script>

Copy the above Code directly to the last </body> label.

2、style.css

/* Gotop */
. Cbbfixed {position: fixed; right: 10px; transition: bottom seconds. 3 s; bottom:-85px; z-index: 3; cursor: pointer ;}
. Cbbfixed. cbbtn {width: 40px; height: 40px; display: block; background-color: # 02a2aa ;}
. Cbbfixed. gotop {transition: background-color gradient. 3 s; margin-top: 1px ;}
. Cbbfixed. gotop. up-icon {float: left; margin: 14px 0 0 9px; width: 23px; height: 12px; background: url (.. /images/side-icon02.png );}
. Cbbfixed. gotop: hover {background-color: # 2c2d2e ;}
. Cbbfixed. cweixin {background: # dadbdd ;}
. Cbbfixed. cweixin div {background: url (.. /images/erwei.png); width: 194px; height: 199px; position: absolute; left:-194px; top:-115px; opacity: 0; transform: scale (0 ); -webkit-transform: scale (0); transform-origin: 100% 70%;-webkit-transform-origin: 100% 70%; transition: transform complete. 3 s, opacity enabled. 3 s;-webkit-transition: all privileges. 3 s; display: none \ 0; * display: none ;}
. Cbbfixed. cweixin: hover div {display: block; transform: scale (1);-webkit-transform: scale (1); opacity: 1; * display: block ;}
. Cbbfixed. cweixin. weixin-icon {float: left; margin: 12px 0 0 11px; width: 18px; height: 18px; background: url (.. /images/side-icon01.png );}

You just need to change the image or something.

Introduce jquery. js

Introduce backtop. js

Backtop. js

// Javascript Document
Function chinaz (){
This. init ();
}
Chinaz. prototype = {
Constructor: chinaz,
Init: function (){
This. _ initBackTop ();
},
_ InitBackTop: function (){
Var $ backTop = this. $ backTop = $ ('<div class = "cbbfixed">' +
'<A class = "cweixin cbbtn" ">' +
'<Span class = "weixin-icon"> </span> <div> </div>' +
'</A>' +
'<A class = "gotop cbbtn">' +
'<Span class = "up-icon"> </span>' +
'</A>' +
'</Div> ');
$ ('Body'). append ($ backTop );

$ BackTop. click (function (){
$ ("Html, body"). animate ({
ScrollTop: 0
},120 );
});

Var timmer = null;
$ (Window). bind ("scroll", function (){
Var d = $ (document). scrollTop (),
E = $ (window). height ();
0 <d? Export backtop.css ("bottom", "10px"): Export backtop.css ("bottom", "-90px ");
ClearTimeout (timmer );
Timmer = setTimeout (function (){
ClearTimeout (timmer)
},100 );
});
}

}
Var chinaz = new chinaz ();

Instance code http://download.csdn.net/detail/wangdianyong/8583979

3. style

<Style>
. Up {width: 54px; height: 54px; background: url (images/topback.gif) no-repeat 0 0; filter: alpha (Opacity = 60);-moz-opacity: 0.6; opacity: 0.6 ;}. up: hover {filter: alpha (Opacity = 100);-moz-opacity: 1; opacity: 1 ;}
</Style>

Introduce jquery

Introduce scrolltopcontrol. js

Scrolltopcontrol. 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 disappears
},
ControlHTML: '<div class = "up"> </div>', // return to the top button
Controlattrs: {offsetx: 30, offsety: 80}, // fixed position of the return button
Anchorkeyword: "# top ",
State :{
Isvisible: false,
Shouldvisible: false
}, Scrollup: function (){
If (! This.css fixedsupport ){
This.w.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.css fixedsupport ){
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.css fixedsupport =! 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.css fixedsupport? "Fixed": "absolute", bottom: mainobj. controlattrs. offsety, right: mainobj. controlattrs. offsetx, opacity: 0, cursor: "pointer "}). attr ({title: "Back to Top "}). click (function () {mainobj. scrollup (); return false ;}). appendTo ("body"); if (document. all &&! Window. XMLHttpRequest & mainobj. $ control. text ()! = "" Commandid mainobj.20.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 ();

Modify the image of the corresponding path.

Instance code http://download.csdn.net/detail/wangdianyong/8584001