Ξεκινάμε έχοντας την HTML σελίδα μας. Μέσα στην σελίδα (κάπου στο τέλος της) θα χτίσουμε τον κώδικα για το κουμπί που θέλουμε να εμφανίζεται. Έτσι γράφουμε:

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

Στον παραπάνω κώδικα, δημιουργούμε μια παράγραφο με συγκεκριμένο ID ώστε να μπορούμε να δώσουμε styles και εντολές της jQuery. Μέσα περιλαμβάνουμε ένα anchor link το οποίο περιέχει ένα span στο οποίο θα βάλουμε το εικονίδιο μας, και το κείμενο για τον χρήστη.

Συνεχίζοντας με την CSS θα δώσουμε κάποια μορφοποίηση στο νέο div που δημιουργήσαμε γράφοντας τον εξής κώδικα:

#back-top                     {position: fixed;bottom: 30px;margin-left:-65px;}
#back-top a                  {color:#000000;display:block;font:12px/100% "Trebuchet MS",Arial,Helvetica,sans-serif;text-align:center;text-decoration:none;text-transform:uppercase;width:48px;margin-bottom:10px;}
#back-top a:hover    {color: #3a9ef4;}
#back-top span           {background:url(../images/bak-top.png) no-repeat scroll center center #DDDDDD;display:block;height:48px;margin-bottom:4px;width:48px;}

Με τον παραπάνω κώδικα δίνουμε στην παράγραφο μας αποστάσεις και συγκεκριμένη θέση στην σελίδα μας, που δεν θα αλλάζει ακόμα και αν κάνουμε scroll. Επίσης δίνουμε χρώμα στο κείμενο του link και την εικόνα παρασκηνίου για το κουμπάκι μας (το εικονίδιο), Τέλος δίνουμε και ένα χρώμα στον σύνδεσμο όταν κάνουμε hover.

Συνεχίζοντας με την jQuery, θα γράψουμε τον κώδικα που θα κρύβει και θα εμφανίζει το κουμπάκι που δημιουργήσαμε, και τέλος θα έχει την λειτουργικότητα που θέλουμε. Γράφουμε τον εξής κώδικα:

$(document).ready(function(){
          // Κρύβουμε το div μόλις φορτώσει η σελίδα
          $("#back-top").hide();
          // Μόλις γίνει scroll πάνω από 100 pixels, εμφανίζουμε το div
          $(function () {
                    $(window).scroll(function () {
                              if ($(this).scrollTop() > 100) {
                                        $('#back-top').fadeIn();
                              } else {
                    $('#back-top').fadeOut();
                    }
          });
          // Μόλις πατήσουμε το anchor, κάνουμε scroll το document με animation 800ms
          $('#back-top a').click(function () {
                    $('body,html').animate({
                    scrollTop: 0
                    }, 800);
                    return false;
                    });
          });
});

Στον παραπάνω κώδικα αρχικά κρύβουμε το div μόλις φορτώσει η σελίδα. Μετά, αν γίνει scroll πάνω από 100 pixels, εμφανίζουμε το div, και τέλος μόλις πατήσουμε το anchor, κάνουμε scroll το document με animation 800ms.

Αυτό ήταν! Πλέον δίνουμε την δυνατότητα στους επισκέπτες μας να κάνουν auto-scroll στην σελίδα μας

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ