Back to Top Summary

Returning to the top of a website is helpful for enhancing user experience. When a page is very long, returning to the top is essential. Back to the top button, you can use the image, background image, vector font icon, or code css to generate. Here we use the css generation method. Returning to the top of a website is helpful for enhancing user experience. When a page is very long, returning to the top is essential.

Back to the top button, you can use the image, background image, vector font icon, or code css to generate. Here we use the css generation method.

html:    

Css: # toTop {display: none; position: fixed;/* fixed position */right: 10px; bottom: 30px; background-color: # e6e6e6; height: 40px; line-height: 40px; width: 40px; transition: all. 4 seconds later. 1 s ;}# toTop: hover {background-color: # b7b7b7 ;}# toTop span {position: relative;/* relative positioning, so that its pseudo elements are absolutely located */top: 5px; left: 15px;/* is converted to 30 ° clockwise. After the mathematical angle is calculated, adjust the position */display: inline-block; width: 3px; height: 20px; background-color: # fff; border-radius: 3px;-webkit-transform: rotate (30deg);-ms-transform: rotate (30deg); transform: rotate (30deg) ;}# toTop span: after {content: ""; position: absolute;/* the pseudo element is relative to # toTop span. */top:-5px; left: 8px; display: inline-block; width: 3px; height: 20px; background-color: # fff; border-radius: 3px;-webkit-transform: rotate (-60deg);-ms-transform: rotate (-60deg); transform: rotate (-60deg );}

You can summarize the following methods to return to the top:

1. anchor mark

# Contains a location information. The default anchor is # top, that is, the top of the webpage.

Method:

1. Use the anchor tag (a tag) to return to the top of the button.

2. Place the positioning target on the top of the page. Here, the value of the name attribute and id attribute is one less than the value of the href attribute in step 1. Select one for name and id.

Disadvantages:

The # symbol is added to the address bar.

2. JavaScript Scroll event:

Back to Top

In scroll (0, 0), the first parameter is the horizontal position relative to the screen, and the second parameter is the vertical position relative to the screen. You can adjust any value.

3. Slowly return to the top of the animation:

Js: $ (window ). scroll (function () {if ($ (window ). scrollTop () >=100) {$ ("# toTop "). fadeIn (400);/* When sliding to a value not less than 100px, return to the top icon to display */} else {$ ("# toTop "). fadeOut (400);/* Go Back To The top icon to hide when sliding to a height less than PX (the page is rolled out) */}; $ ("# toTop "). click (function () {$ ("html, body "). animate ({scrollTop: 0}, 100);/* Duration: 100 ms */return false ;});