Προσθέστε " scroll to top " κουμπί χρησιμοποιώντας Jquery

Γεια,οι περισσότεροι από σας ξέρουν για το " scroll to top " ,το οποίο είναι πολύ χρήσιμο για αυτούς που έχουν ένα blog , με πολλές αναρτήσεις σε μια σελίδα η πολλά comments .Ίσως χρησιμοποιείτε ήδη "scroll to top" κουμπί ,αλλά αυτό φαίνεται πολύ κοινότυπο. Έτσι, αυτό το κουμπί θα δώσει διαφορετικό στυλ από τα παλαιά κουμπιά, με " smooth" effect.Θα το συμπαθήσετε!
ΟΚ Τώρα ας δούμε πως μπορούμε να το βάλουμε στο blog μας:

1.Πάμε "Επεξεργασία HTML" , κάνουμε κλικ στο κουτί "Επέκταση προτύπων γραφικών στοιχείων" και ψάχνουμε να βρούμε το κωδικό </body> και κολλάμε το παρακάτω  κωδικό πριν απ,αυτό

<a href="#" id="toTop">^ Scroll to Top</a>

Σημείωση : Το " ^ Scroll to Top " μπορείτε να το αντικαταστήσετε με όποια λέξη θέλετε π.χ. " Top " η κάτι άλλο

2. Τώρα προσθέστε το CSS code πριν απο το ]]></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; }

Σημείωση : Αν δεν σας αρέσει το background που εμφανίζετε μπορείτε να το αντικαταστήσετε με οποία εικόνα σας αρέσει,απλά αντί για το κωδικό που σας έδωσα πιο πάνω χρησιμοποιήστε αυτό το κωδικό :

/* Jquery scroll to top */
#toTop {
width:40px; height:40px;
background: #FFF url(http://i651.photobucket.com/albums.........png) no-repeat;
padding:3px;
text-align:center;
position:fixed;
bottom:10px;
right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
}

Αλλάξτε το http://i651.photobucket.com/albums.........png με το url της εικόνας σας και προσαρμόστε width και height στα μέτρα που θέλετε

3. Τελευταιο βημα , βαζουμε Jquery codes πριν απο το </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)
* Bring to you by Zen from http://zenplate.blogspot.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
* Do not delete these infomation
* 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>

Τώρα αποθηκεύουμε το πρότυπο και βλέπουμε το αποτέλεσμα

Κωδικός by Craig Wilson of Ph.Creative Convert to Blogger: Zenplate