Back to top of the summary

Back to the top of the summary site the back top feature is beneficial to enhance the user experience, and when a page is long and long, it is essential to get back to the top. Back to the top button, you can use the picture, background map, vector font icon, or you can use code CSS to generate it. Here you use CSS-generated methods. Html:CSS: #toTop {display:none; position:fixed;   /* Fixed positioning */right:10px;   bottom:30px;   Background-color: #e6e6e6;   height:40px;   line-height:40px;   width:40px; Transition:all. 4s ease. 1s;} #toTop: hover {background-color: #b7b7b7;}   #toTop span {position:relative;/* relative positioning so that its pseudo-element is absolutely positioned */top:5px; left:15px;   /* Conversion to clockwise rotation 30 °, through the mathematical angle of the appropriate adjustment 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;   /* pseudo element is relative to #toTop span absolute positioning */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);} The back top button generated using CSS code is as follows: For the top of the various methods summarized as follows: 1. Anchor tag # contains a location information, the default anchor is #top that is the top of the page. Method: 1. Use anchor for buttons back to topRemember, a tag, back to top 2. Place the target at the top of the page, where the value of the Name property and the ID property is less than the value of the href attribute in the first step #,name and the ID is selected one. Disadvantage: The number of # symbols will be added to the address bar. 2. JavaScript Scroll Event: Returns the first parameter in the top Scroll (0, 0) is relative to the horizontal position of the screen, and the second parameter is the vertical position relative to the screen. Any one of these values can be adjusted. 3. Animate slowly back to top: js:$ (window). Scroll (function () {if (window). scrolltop () >=100) {$ ("#toTop"). FadeIn (400); /* When sliding to no less than 100px, go back to the top icon to display */}else {$ ("#toTop"). FadeOut (400);/* when sliding to 100px less than (the page is being rolled), return to the top icon hidden */}}); $ (" #toTop "). Click (function () {$ (" html, Body "). Animate ({scrolltop:0}, 100);/* Duration is 100ms */return false;});

