Page back to the top of the implementation and principle

Turn from: http://www.mojidong.com/html/css/js/2013/03/03/page-top-to-achieve/

Now many pages have a back to the top of the function, when you drag the scroll down to a certain extent will be in the lower right side of a back to the top of the button, click You can immediately return to the top of the page, very intimate design.

I'm going to do it by myself today. Listen for the current page scrolling event when scrolling to a certain pixel to show back to the top of the button to the top button to tie the point hit event, click the button to let the scroll bar back to the top and hide the button

The core point is mainly in the JS control button display and hide and click the button back to the top and how to control back to the top button does not scroll with the document

The JS pseudo code is as follows

Bound page scrolling event
$ (document). Bind (' scroll ', function () {
    var len=$ (this). ScrollTop ()
    if (len>=100) {
        / /show back to top button
    }else{
        //Hide back to top button
    }
//bind back to top button click event
$ (' #回到顶部 '). Click (function () {
    // Animation effect, smooth scrolling back to top
    $ (document). Animate ({scrolltop:0});
    Do not need animations go straight back to the top
    //$ (document). scrolltop (0)
})

Let the button not scroll with the document need to use CSS properties position

Static: No special positioning, the object follows the normal document flow. Properties such as Top,right,bottom,left are not applied.

Relative: Objects follow normal document flow, but will offset the position in the normal document stream based on attributes such as Top,right,bottom,left.

Absolute: Object out of normal document flow, using attributes such as top,right,bottom,left for absolute positioning. And the cascade is defined by the Z-index property.

Fixed: Object out of normal document flow, using attributes such as top,right,bottom,left to navigate the window as a reference point, and the object will not scroll with the scroll bar when it appears. IE6 and the following do not support this parameter value

Obviously we need fixed (IE6 is really a pain in the egg)

Write the test code when you have the idea

<! DOCTYPE html>  
The test result is not very satisfying, the drag scroll bar button is displayed, but the click does not return to the top.

The original problem in the scrolling operation of the object, the document replaced by the body

Bind back to top button click event
$ (' #up '). Click (function () {
    //animation effect, smooth scrolling back to top
    $ (' body '). Animate ({scrolltop:0});
    Do not need animation directly
    //$ (' body '). ScrollTop (0)
})
 
Test everything OK think it's over, you're so naïve, boy.

The browser is compatible, the siege teacher's heart forever Pain ~

The code in IE does not give the force, scrolling can not show the button, roll in the end are not shown, crash.

The original event to be tied to the window

Bound page scrolling event
$ (window). bind (' scroll ', function () {
    var len=$ (this). ScrollTop ()
    if (len>=100) {
        / /display back to top button
        $ (' #up '). Show ();
    else{
        //Shadow hidden back to Top button
        $ (' #up '). Hide ();
    }

 
On the final code

<! DOCTYPE html>