Ads 468x60px

Τρίτη, 7 Απριλίου 2015

Scroll back to top button without jQuery

Φίλες και φίλοι γεια σας, είχαμε δει σε παλαιότερη ανάρτηση ένα από τα χρησιμότερα
widget για ta blog μας το Scroll back to top button .Κάνει ακριβώς την ίδια δουλειά
με το Back to top button δηλαδή με το πάτημα ενός κουμπιού επανερχόμαστε απευθείας 
στην κορυφή της  σελίδας, με την μόνη διαφορά, ότι αυτό ανεβαίνει σκρολάροντας προς
τα πάνω δηλαδή κυλιόμενα και όχι απότομα όπως το Back to top button!



Σήμερα θα δούμε πάλι ένα widget  Scroll back to top button αλλά χωρίς να έχει μέσα στον
κώδικα του jQuery script!Σε πολλά blogs που έχουν sliders η κάποια widgets που είχαν
στον κώδικα τους jQuery script το scroll back δεν λειτουργούσε η λειτουργούσε και δεν
λειτουργούσε κάτι άλλο λόγω του jQuery script!Με αυτή την ανάρτηση ελπίζω να λυθούν
αυτά τα προβλήματα!


Demo δεξιά κάτω εδώ στο Tech Time!


Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτό...

 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--
.................................................................................................................................................
<!--NBT Scroll to top widget Start--><script type='text/javascript'>$(function(){$(window).scroll
(function(){if($(this).scrollTop()!=0){$("#NBT-top").fadeIn()}else{$("#NBT-top").fadeOut()}});$
("#NBT-top").click(function(){$("body,html").animate({scrollTop:0},1400);return false})});</script>
<a href="http://www.newbloggertips.com"></a><a id='NBT-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><img src='ΕΔΏ ΜΠΑΙΝΕΙ ΤΟ URL THΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ '
 alt='Scroll to top widget @NBT Blog.newbloggertips.com '/></a>
<!--NBT Scroll to top widget End--> 
.....................................................................................................................................................
ΑΛΛΑΓΕΣ
  

1400 --Εάν αυξήσετε το 1400 μειώνεται η ταχύτητα του scroll, εάν το μειώσετε αυξάνεται!

 right --Εάν βάλετε left το βελάκι μπαίνει αριστερά!

ΕΔΏ ΜΠΑΙΝΕΙ ΤΟ URL THΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ --Εδώ βάζετε την διεύθυνση της εικόνας σας!

Μόλις τελειώσετε Αποθήκευση και είστε έτοιμοι!! 

Έτοιμα εικονίδια: 





 https://lh3.googleusercontent.com/-lxILhkGYAfY/UiUowE7huPI/AAAAAAAAIAw/0-DpgGa8SmQ/s62/arrow_up_2.png

2.


  https://lh5.googleusercontent.com/-yLgkRRI9MUQ/Ue6Tpzm38EI/AAAAAAAAGtQ/LZI47JbURF8/s62/arrow-166-512.png

3.





 https://dl.dropboxusercontent.com/u/49409267/Animation/ARROWS/z4.gif

4.





https://dl.dropboxusercontent.com/u/49409267/Animation/ARROWS/z5.gif



Πιο πολλά έτοιμα εικονίδια ΕΔΩ 

 

Καλή επιτυχία!!! 


Πηγή κώδικα
thanks to newbloggertips.com




Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog