Reprint | Return top code in Web page (multiple methods)

1. The simplest static return top, click on the top of the direct jump page, common in fixed placement at the bottom of the page to return to the top function

Method One: Click on the named anchor to return to the top preset ID element

<a href="#top" target="_self"

Method Two: The Operation Scrooll function is used to control the position of the scrollbar (the first parameter is the horizontal position, the second parameter is the vertical position)

<a href="javascript:scroll (0,0)"

Disadvantage: The return effect is immediate, does not conform to the General browsing page scrolling feeling;
Statically fixed at the bottom of the page, not necessarily visible to the user.

2. Simple static return top, with JS simulation scrolling effect slide to the top

functionPageScroll () {//Scrolls the content by the specified number of pixels (the first parameter is the number of pixels to scroll to the right, and the second parameter scrolls down)Window.scrollby (0,-100);//delay recursive call to simulate scrolling up effectScrolldelay = SetTimeout (' PageScroll () ', 100);//gets the scrolltop value, The standard Web page of the DTD is DOCUMENT.DOCUMENTELEMENT.SCROLLTOP, otherwise it takes document.body.scrollTop; because only one of them will take effect and the other will be 0, so the value can get the true scrolltop value of the Web page. varstop=document.documentelement.scrolltop+Document.body.scrollTop;//determine when the page reaches the top, cancel the delay code (otherwise scrolling to the top of the page can no longer navigate down the page)if(stop==0) cleartimeout (scrolldelay);}

<a onclick="pagescroll ()"

Disadvantage: The scrolling effect is not smooth, and when the page is long, click to return to the top, do not reach the top of the page can no longer browse the page normally;
Ditto is still static fixed at the bottom of the page, not necessarily exposed in front of users.

3. Dynamic on-demand load back to top, CSS side screen absolute positioning, combined with simple jquery animation for a better experience

function Gototop (min_height) {//predefined returns the HTML code at the top, and its CSS style defaults to not showingvargototop_html ='<div id= "Gototop" > Back top </div>';//inserts the HTML code that is returned at the top of the page at the end of the element with the ID page$("#page"). Append (gototop_html); $ ("#gotoTop"). Click (//defines the animation that returns the top click scrolling upFunction () {$ ('Html,body'). Animate ({scrolltop:0}, the);}). Hover (//Added feedback to the top of the mouse to add a delete CSS class implementationFunction () {$ ( This). AddClass ("Hover");},function () {$ ( This). Removeclass ("Hover");});//gets the minimum height of the page, the default is 600 pixels if no incoming valueMin_height? Min_height = Min_height:min_height = -;//binding handlers for the scroll event of a window$ (window). Scroll (function () {//gets the vertical position of the window's scroll barvars =$ (window). scrolltop ();//when the vertical position of the window's scroll bar is greater than the minimum height of the page, let the return top element fade out, otherwise fadeif(S >min_height) {$("#gotoTop"). FadeIn ( -);}Else{$("#gotoTop"). FadeOut ( $);};});}; Gototop (); 

CSS style code:

/*default style, mainly position:fixed to achieve absolute screen positioning*/#gotoTop {display:none;position:fixed; Top: the%;left: -%;CURSOR:POINTER;MARGIN-TOP:-50PX;MARGIN-LEFT:520PX;PADDING:9PX 4px;width:20px;text-align:center;border:1px solid #e0e0e0; background: #fff;}/*using CSS expressions (expression) to achieve position:fixed effect under IE6*/#gotoTop {_position:absolute;_top:expression (documentelement.scrolltop+ Documentelement.clientheight *3/4+"px")}/*feedback Effect of mouse entry*/#gotoTop. Hover{background: #5CB542; color: #fff; text-decoration:none;}

This method determines the page height as needed to "return to the top" display to the user, with CSS style to achieve absolute screen positioning, with the help of jquery to achieve a better smooth scrolling effect. Further consideration if the user set the browser to disable JS, then we can combine the third scenario method one, disable JS after the third program will not be seen by the user, not disabled we added a sentence in the JS code to hide the first solution.

In short, the long page is to be avoided, inevitably, plus the "back to the top" feature may bring the user a relatively better experience.

Reprint | Return top code in Web page (multiple methods)