Gameplay24

Σε αυτήν την ανάρτηση θα σας δείξω πως μπορείτε να προσθέσετε ένα 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. Πατάτε αποθήκευση και είστε έτοιμοι.