Return to the top code in the web page (multiple methods) with additional notes_jquery

The following is a simple code implementation of the return to top effect, with comments.
1. The simplest static return to the top. Click to jump directly to the top of the page. Commonly used in fixed placement at the bottom of the page. Return to the top function
Method 1: Use a named anchor to click to return to the top element with the preset ID of top

Copy code The code is as follows:

Return to top

Method 2: Operate the scroll function to control the position of the scroll bar (the first parameter is the horizontal position, the second parameter is the vertical position)

Copy code The code is as follows:

Return to top

Disadvantages: The return effect is immediate and does not conform to the scrolling feeling of general browsing pages;
Static fixed at the bottom of the page, users may not necessarily You can see it.

2. Simple static return to the top, use js to simulate the scrolling effect and slide up to the top

Copy code Code As follows:

function pageScroll(){
//Scroll 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 is to scroll down Number of pixels)
window.scrollBy(0,-100);
//Delayed recursive call to simulate scrolling upward effect
scrolldelay = setTimeout('pageScroll()',100);
/ /Get the scrollTop value. The standard webpage that declares the DTD takes document.documentElement.scrollTop, otherwise it takes document.body.scrollTop; because only one of the two will take effect, the other will always be 0, so the true value of the webpage can be obtained by taking the sum value. The scrollTop value
var sTop=document.documentElement.scrollTop document.body.scrollTop;
//Judge when the page reaches the top and cancel the delay code (otherwise the page will scroll to the top and you will no longer be able to browse the page normally)
if(sTop==0) clearTimeout(scrolldelay);
}

Copy code The code is as follows:

Back to top

Disadvantages: The scrolling effect is not smooth, and When the page is very long, click to return to the top. If you do not reach the top of the page, you will no longer be able to browse the page normally;
Same as above, it is still statically fixed at the bottom of the page and may not be exposed to the user.

3. Dynamic on-demand loading back to the top, css side screen absolute positioning, combined with simple jQuery animation to achieve a better experience

Copy code The code is as follows:

function gotoTop(min_height){
//Predefined html code that returns the top, its css style defaults to not displaying
var gotoTop_html = '

Return to top

';
//Insert the html code that returns to the top at the end of the element with the id page on the page
$("#page ").append(gotoTop_html);
$("#gotoTop").click(//Define the animation to return to the top and click to scroll up
function(){$('html,body').animate({ scrollTop:0},700);
}).hover(//In order to increase the feedback effect of mouse entry when returning to the top, use adding and deleting css classes to implement
function(){$(this).addClass("hover ");},
function(){$(this).removeClass("hover");
});
//Get the minimum height of the page, if no value is passed in, the default is 600 pixels
min_height ? min_height = min_height : min_height = 600;
//Bind a handler function for the scroll event of the window
$(window).scroll(function(){
//Get the scroll of the window Vertical position of the bar
var s = $(window).scrollTop();
//When the vertical position of the scroll bar of the window is greater than the minimum height of the page, let the return to top element fade in, otherwise fade in
if( s > min_height){
$("#gotoTop").fadeIn(100);
}else{
$("#gotoTop").fadeOut(200);
};
});
};
gotoTop();

css style code:

Copy Code The code is as follows:

/*Default style, mainly position:fixed to achieve absolute positioning of the screen*/
#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:pointer; margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px solid #e0e0e0;background:#fff;}
/*Use CSS expressions (expression) to achieve the position:fixed effect under ie6*/
#gotoTop{_position:absolute;_top:expression(documentElement.scrollTop documentElement.clientHeight * 3/4 ​​"px")}
/*The mouse enters Feedback effect*/
#gotoTop.hover{background:#5CB542;color:#fff;text-decoration:none;}

This method determines the height of the page and returns "return to the top" as needed "Displayed to users, the absolute positioning of the screen is achieved using css styles, and a smoother scrolling effect is achieved with the help of jQuery. Further consideration is that if the user sets the browser to disable js, then we can combine the third solution with the first solution. After disabling js, the third solution will not be visible to the user. If it is not disabled, we will add a sentence in the js code Hide the first option.

In short, long pages should be avoided as much as possible. When unavoidable, adding the "return to top" function may give users a relatively better experience.