Back to top button css + js, back to top css

Back to top button css + js, back to top css

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 attribute 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; border-radius: 6px; display: block; height: 30px; width: 30px; margin-bottom: 5px; /* use the transition attribute in CSS3 to add the 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 ;}

Js

<Script type = "text/javascript"> $ (document ). ready (function () {// first hide # back-to-top $ ("# back-to-top "). hide (); // when the position of the scroll bar is below 600 pixels from the top, the jump link appears, otherwise it disappears $ (function () {$ (window ). scroll (function () {if ($ (window ). scrollTop () & gt; 600) {$ ("# back-to-top "). fadeIn (500);} else {$ ("# back-to-top "). fadeOut (500) ;}}); // when you click the jump link, return to the top position of the page $ ("# back-to-top "). click (function () {$ ('body, html '). animate ({scrollTop: 0}, 500); return false ;}); </script>