Mootools SmoothScroll - Ομαλή κίνηση με anchors και divs

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
fusion
Δημοσιεύσεις: 146
Εγγραφή: 23 Αύγ 2008 21:34
Τοποθεσία: Λάρισα
Επικοινωνία:

Mootools SmoothScroll - Ομαλή κίνηση με anchors και divs

Δημοσίευση από fusion » 30 Σεπ 2008 22:16

Απλά ποστάρω τον κώδικα μήπως ψάχνει κάποιος τίποτα παρόμοιο.
Η λύση αυτή, σε εμένα τουλάχιστον, δούλεψε out-of-the-box. :D

Γιατί υπάρχει το script;
Τα anchors ειναι συνήθως links τα οποία σε "πετάνε" σε περιοχές της ίδιας σελίδας.
Αυτό που κάνουν είναι να ψάχνουν για tags με id με κοινό όνομα με αυτό που έχεις ορίσει ως link.

Γιατί αυτό είναι άσχημο;
Δεν είναι πάντα άσχημο, όταν λες στον χρήστη ότι το link τον πάει στην κορυφή της σελίδας(#top) δεν υπάρχει πρόβλημα. Τι γίνεται όμως όταν υπάρχουν διάφορα anchors για πολλές περιοχές της σελίδας? Σίγουρα ο χρήστης μπερδεύεται με την "άμεση" εναλλαγή του κειμένου.

Mootools SmoothScroll
Τί χρειαζόμαστε λοιπόν; Λίγη javascript(και έτοιμη παρακαλώ :P ).
Με την συγκεκριμένη library θα έχουμε ένα ομαλό scrolling έως το σημείο με το επιθυμητό id έτσι ώστε να γίνει αντιληπτό από τον χτήστη σε ποιο σημείο της σελίδας ήταν και σε ποιο σημείο κατευθύνεται.

Damn small code
1) Κατεβάζεις την library απο εδω και την εισάγεις στην html.

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="mootools-smoothscroll.js"></script>
2) Γράφεις το ακόλουθο script πάλι στο <head> της σελίδας σου.

Κώδικας: Επιλογή όλων

<script type="text/javascript">window.addEvent&#40;'domready',function&#40;&#41; &#123; new SmoothScroll&#40;&#123; duration&#58; 1800 &#125;&#41;; &#125;&#41;;</script>
Όπου 1800 είναι τα milliseconds για μια πλήρη μεταφορά(μέγεθος παραμετροποιήσιμο δηλαδή).

3) Φροντίζεις να υπάρχει το κατάλληλο id στο tag στο οποίο θέλεις να κατευθυνθείς.


happy coding... :)



Πηγή

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες