Js+jquery implementation returns top function

Add in HTML header

<p id= "Back-to-top" ><a href= "#top" ><span></span> back to top </a></p>

And then write in jquery

<script>
$ (function () {
A jump link appears when the position of the scroll bar is below 100 pixels from the top, otherwise disappears
$ (function () {
$ (window). Scroll (function () {
if ($ (window). scrolltop () > 100) {
$ ("#back-to-top"). FadeIn (1500);
}
else {
$ ("#back-to-top"). FadeOut (1500);
}
});

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}, 1000);
return false;
});
});
});
</script>

Add your own image address for a beautiful CSS style

P#back-to-top {
position:fixed;
Display:none;
bottom:100px;
right:80px;
}

P#back-to-top a {
Text-align:center;
Text-decoration:none;
color:red;
Display:block;
width:64px;
/* Add a gradient effect to the text in the Jump link using the Transition property in CSS3 */
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}

P#back-to-top A:hover {
/*color: #979797; * *
Color: #000;
}

P#back-to-top a span {
Background:transparent url ('.. /img/gnome-go-top-48.png ') no-repeat;

border-radius:6px;
Display:block;
height:64px;
width:56px;
margin-bottom:5px;
/* Add a gradient effect to the <span> label background color using the Transition property in CSS3 */
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
}

#back-to-top a:hover Span {
Background:transparent url ('.. /img/gnome-go-top-48.png ') no-repeat;
}

Js+jquery implementation returns top function