Turn from: http://www.jb51.net/article/80304.htm
Modify the section, and then directly copy and paste can be used (put the position you are happy to be good)
Required Material: http://fontawesome.io/(download this icon library)
<style> p#back-to-top{position:fixed;
bottom:18px;
right:12px;
} p#back-to-top a{Text-align:center;
Text-decoration:none;
Color: #000;
Display:block;
width:30px;
/* Use the Transition property in CSS3 to add a gradient effect to the text in the Jump link * *-MOZ-TRANSITION:COLOR1S;
-webkit-transition:color1s;
-o-transition:color1s;
P#back-to-top a:hover{color: #000011;
P#back-to-top a span{background-color: #ffffff;
Z-index:-100;
border:1px solid #cccccc;
border-radius:6px;
Display:block;
height:30px;
width:30px;
margin-bottom:5px;
/* Use the Transition property in CSS3 to add a gradient effect to the <span> label background color * *-MOZ-TRANSITION:BACKGROUND1S;
-webkit-transition:background1s;
-o-transition:background1s;
#back-to-top a:hover span{background-color: #f0f0f0; } </style> <p id= "back-to-top" ><a href= "#top" ≫<span><i class= "fa fa-chevron-up" aria-hidden= "true" ></i></span></a></p> <script src= "Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script> <script> $ (
Document). Ready (function () {///First hides #back-to-top $ ("#back-to-top"). Hide (); When the scroll bar is positioned below 600 pixels from the top, the jump link appears, or it disappears $ (function () {$ (window). Scroll (function () {.
window). scrolltop () >600) {$ ("#back-to-top"). FadeIn (500);
}else{$ ("#back-to-top"). fadeout (500);
}
}); When you click the Jump link, go back to the top position of the page $ ("#back-to-top"). Click (function () {$ (' body,html '). Animate ({scrolltop:0},5
00);
return false;
});
});
}); </script>