ΠΩΣ ΒΑΖΩ SCROLL TOP & SCROLL BOTTOM BUTTONS

ΠΩΣ ΒΑΖΩ SCROLL TOP & SCROLL BOTTOM BUTTONS
Με τους παρακάτω κώδικες μπορείτε να βάλετε 2 κουμπιά scroll top & scroll bottom στο blog σας και πάτώντας τα να μεταφέρεστε αυτόματα στην κορυφή ή στο τέλος του ιστολογίου σας χωρίς να χρειάζετε να κάνετε scrolling με το ροδάκι του mouse σας. Είναι 2 διαφορετικοί κώδικες βάλτε όποιον σας αρέσει και δουλεύει καλύτερα στο blog σας. Την πρώτη γραμμή που περιέχει το javascript query αρχείο μπορείτε να την παραλέιψετε εάν υπάρχει ήδη στο ιστολόγιό σας από κάποιον άλλο κώδικα. Τα χρώματα των κουμπιών αλλάζουν εκεί του υπάρχει το σύμβολο της δίεσης #. Τις εικόνες των κουμπιών κατεβάστε τες και να ανεβάστε τες σε λεύκωμα του google+.

1^ος ΚΏΔΙΚΑΣ

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style>

#toplink, #botlink {

          position: fixed;

          right: 1%;

          bottom: 50%;

          padding: 10px;

          margin: 0 -20px 0 0;

          color: #FFFFFF;

          font: 14px Arial;

          background: #105105;

          border: 1px solid #FBBB22;

          border-bottom: 1px solid #FBBB22;

          border-radius: 6px 3px 0 0;

          z-index: 99;}

#botlink {

          top: 50%;

          padding: 10px;

          background: #661111;

          bottom: auto;

          border: 1px solid #FBBB22;

          border-top: 1px solid #FBBB22;

          border-radius: 0 0 3px 6px;}

#toplink:hover {

          color: #FFFFFF;

          background: #207907;

          text-decoration: none;}

#botlink:hover {

          color: #FFFFFF;

          background: #FF1111;

          text-decoration: none;}

</style>

<script>

$.fn.ready(function() {

$("a[href=#top]").live("click", function(e) {

$("html,body").animate({scrollTop:0}, 1000);

e.preventDefault();});

$("a[href=#bot]").live("click", function(e) {

$("html,body").animate({scrollTop:$(document).height()}, 1000);

e.preventDefault();});});

</script>

<a href="#top" id="toplink" title="Go to top">▲</a>

<a href="#bot" id="botlink" title="Go to bottom">▼</a>';

2^ος ΚΏΔΙΚΑΣ

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<a href='#' style='display:scroll;position:fixed;bottom:53%;right:5px;' title='Back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIhkSYRH4TEItaE6TKKPrV1rwWNGNLW2U0mWKdgcBL4TaDKHmZMPfbf8HayNODhrXysuZAD3T5HcvPZddNKbqxJ0VrRHwIUXw4qI8ZW1LBOgi53RyshLtEZ7bU74WgG_hZIc0ReQ5J3koJ/s50-no/top-button.jpg'  width="30" height="30"/></a> <br /> <br/> <br />

<a href='#Go Down' style='display:scroll;position:fixed;bottom:50%;right:5px;' title='Go Down'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4escXlDL_oJq9RiadSr1kFonS0XqU5LSAU-sf-5C3J5gwPUAXU8XByooAyMu-ylPK7oCkN8GmcHgcpSDjrjeAjDvzAXCVASkJ11_HAAIKoFQXSGF0w5WfFOL-4HRoXkWABw0GKNCC7irc/s50-no/bottom-button.jpg'  width="30" height="30"/></a><br /> <a name='Go Down'></a>