Attractive + Smooth Scrolling "Back to Top" button for Blogger Blogs

Προσθέτοντας ένα ελκυστικό "Επιστροφή στην κορυφή" κουμπί για να Blogs σας μπορεί να φανεί πιο επαγγελματική και πιο σημαντικό είναι ότι παρέχει μια εύκολη λύση πλοήγησης στους αναγνώστες. Αυτό το σεμινάριο θα σας δείξει πώς μπορείτε να προσθέσετε νέα "Επιστροφή στην κορυφή" κουμπί με "Ομαλή κύλιση" και "Fade out" αποτελέσματα.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();
   
    // fade in #back-top
    $(function () { 
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>
<style>
#back-top {
position: fixed;
bottom: 30px;
margin-left: -170px;
}
#back-top a {
width: 45px;
display: block;
text-align: center;
font: 8px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #666;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover {color: #000;}
/* arrow icon undefinedspan tag) */
#back-top span {
width: 45px;
height: 45px;
display: block;
margin-bottom: 7px;
background: #777 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ3XKab7Im_GY8xI5wET95SpHJLh7XfciZbn3drM_0chEe9_rC858CxrGbZ6R2A-OBgvtBPz-s3OMgSYUJ6o4MLEKC_q2fkaAKGq4BFb5bu9L49YJS63TM3crYaw9J1nwsyvLOUPiz5gxu/s1600/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover span {   background-color: #000;}
</style>

<div id="back-top" style="display: block; ">
<a href="#top"><span></span><font><font>Top</font></font></a>
</div>

ΠΗΓΗ