Σε αυτήν την ανάρτηση θα σας δείξω πως μπορείτε να προσθέσετε ένα Scroll to Top Button χρησιμοποιώντας Jquery στο blogspot σας. Το Scroll to Top Button είναι ένα κουμπί που εμφανίζεται στην σελίδα σας όταν ο αναγνώστης τείνει να κατέβει προς τα κάτω. Όταν όμως βρίσκεται στο top, στη κορυφή δηλαδή της σελίδα σας, αυτό εξαφανίζετε απαλά χωρίς να του τραβήξει ιδιαίτερα την προσοχή. Το Scroll to Top Button θα μπορούσαμε να πούμε ότι είναι μια πιο βελτιωμένη έκδοση του Back To Top Button που σας είχα δείξει σε αυτή εδώ την ανάρτηση http://gameplay24.blogspot.com/2010/05/go-to-top-button-go-to-end-button.html. Σε αντίθεση λοιπόν με το Back To Top Button στο Scroll to Top Button όταν ο αναγνώστης κάνει κλικ πάνω του, η σελίδα ρολάρει αργά προς τα πάνω δίνοντας έτσι ένα αρκετά όμορφο αποτέλεσμα που κερδίζει τους αναγνώστες σας.

Για να το προσθέσετε στο blogspot σας ακολουθήστε τα παρακάτω βήματα :
 1. Συνδεθείτε στον blogger λογαριασμό σας >> Σχεδίαση >> Επεξεργασία HTML
 2. Με την βοήθεια του Ctrl+F βρίσκετε το </body> και προσθέτετε τον παρακάτω κώδικα ΠΡΙΝ από αυτό.

<a href=”#” id=”toTop”>^ Scroll to Top</a>
 3. Τώρα βρείτε το ]]></b:skin> και προσθέτετε τον παρακάτω κώδικα ΠΡΙΝ από αυτό.
/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
 4. Τέλος βρείτε το </body> και προσθέτετε τον παρακάτω κώδικα ΠΡΙΝ από αυτό
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’></script>
<script type=’text/javascript’>
/*———————–
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive “Scroll to Top” link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
———————–*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(“href”);if($(window).scrollTop()!=”0″){$(this).fadeIn(“slow”)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==”0″){$(scrollDiv).fadeOut(“slow”)}else{$(scrollDiv).fadeIn(“slow”)}});$(this).click(function(){$(“html, body”).animate({scrollTop:0},”slow”)})}});

$(function() { $(“#toTop”).scrollToTop(); }); </script>

 5. Πατάτε αποθήκευση και είστε έτοιμοι.

1 σχόλιο:


Μπερδεμένος; Γράψε ελεύθερα αυτό που θέλεις, εδώ κανένας δεν πρόκειται να σε παρεξηγήσει! Θα σε βοηθήσουμε!

1. Σε περίπτωση που δεν θες να δίνεις στοιχεία σου στο internet χρησιμοποίησε ψευδώνυμο ή την ανωνυμία σου ;)
2. Τα Greeklish επιτρέπονται...δες τα ως μέσω εξέλιξης!
3. Καλό θα ήταν να μην γράφεις ολόκληρες προτάσεις με κεφαλαία... είναι σαν να φωνάζεις.
4. Δεν σε αναγκάζει κανείς, αλλά άμα θες προσπάθησε να βοηθήσεις στις απορείς άλλων με ένα reply :) έτσι στο μέλλων θα βοηθήσει και εσένα κάποιος.