Js+css to achieve the top button _javascript tips

This article introduces the method of realizing the js+css to the top button, and shares it for everyone's reference, the specific contents are as follows

Effect

Html

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

Css

p#back-to-top{
  position:fixed;
  bottom:100px;
  right:80px;
}
P#back-to-top a{
  text-align:center;
  Text-decoration:none;
  Color: #d1d1d1;
  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: #979797;
}
P#back-to-top a span{
  background: #d1d1d1 URL (.. /images/arrow_up.png) No-repeat Center Center;
  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: #979797 URL (.. /images/arrow_up.png) No-repeat Center Center;

Js

<script type= "Text/javascript" >
$ (document). Ready (function () {
 //Hide #back-to-top First
 $ ("# 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 () {
   if ($ (window)). ScrollTop () >600) {
    $ ("#back-to-top"). FadeIn;
   else{
    $ ("#back-to-top"). Fadeout (+);
   }
 );
 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},500);
   return false;
});}; </script>

The above is the entire content of this article, I hope to help you learn.