How does a webpage implement a button that returns to the top

First from the JS event to consider, how this function is implemented.

1: The button appears when the mouse is dropped.

2: Click on the button to go back to the top. button is hidden.

(1) First place a placeholder, where to display the button

1     <!--extension    ID can also have a style, but #id display-2     <ul id= "Jump" >3         <!--display:none: inline label    tops Click to top-->4         <li style= "display:none; height:50px;" ><a id= "Tops" href= "#top" title= "Back to Top" ></a></li>5         <!--<li style= "" > </li>6     </ul>

(2) Slide the mouse, trigger the event, when more than how much distance, show, or hide

1         $ (window). Scroll (function() {2             if ($ (window). scrolltop () >){  3                 $ (' #jump li:eq (0) '). FadeIn (+);   gradually show 4             else  {5                 $ (' #jump li:eq (0) '). FadeOut (800); // gradually hide 6             }7         });

(3) Click on the button to trigger the event, with the animation effect back to the top

1         $ ("#top"). Click (function() {2             $ (' body,html '). Animate ({scrolltop:0},400);   returns 3} as an animated effect          );

And then say his style:

1: Where to appear, where to place the placeholder 2: style of the button

(1): First of all must be the placeholder style bar, where to appear

1 /*the location that appears*/2 #jump{3 position:fixed;/*Position: Position fixed: relative to Window*/4 _position:Absolute;5 Top:400px;/*distance from top 400 megapixels*/6 _top:expression (documentelement.scrolltop + "px");7  Left:50%;/*the element itself to the left of how much*/8 Margin-left:550px;/*margin Outer Box Properties*/9 _margin-right:0px;Ten width:40px; One Z-index: -;/*stacking order of elements*/ A}

(2): Click the button's style and background

1 /*Click the style of the box*/2 #tops{3 Display:Block;/*the type of the box that the element should generate*/4 width:40px;5 Height:42px;6 cursor:Pointer;/*The shape of the cursor to display this is a hand*/7}8 /*Background Image*/9 #tops{Ten background:URL (.. /img/top.png) Repeat scroll 0% 0% transparent;/*Background Image*/ One}

(3) When you put the mouse on the button to display the style

1 /* the style that will be displayed when the mouse is placed on top */ 2 #tops: Hover {3    background:url (.. /img/toped.png) Repeat scroll 0% 0% transparent; 4 }

And then he came out, haha.

Summarize

How does a webpage implement a button that returns to the top