Πρόσθετο wordpress για κύλιση προς τη σελίδα. Κουμπί επάνω WordPress - τα καλύτερα πρόσθετα. Ημιδιαφανές κουμπί με χρήση JQuery και CSS

Το μόνο που απαιτείται από έναν webmaster είναι ο ιστότοπός του να είναι βολικός, ότι η χρήση του δεν προκαλεί κατάθλιψη στους επισκέπτες και ότι το πρότυπο δεν παρεμβαίνει στην ικανότητα των χρηστών να μελετούν ήρεμα το υλικό του πόρου. Εάν χρησιμοποιείτε ένα μη τροποποιημένο θέμα WordPress, πιθανότατα δεν θα μπορείτε να δημιουργήσετε έναν βολικό ιστότοπο, καθώς τα κουμπιά για το WordPress δεν είναι εγκατεστημένα από προεπιλογή - πρέπει να ληφθούν και να ενεργοποιηθούν επιπλέον. Σε τελική ανάλυση, για να μπορεί ο χρήστης να διαβάζει εύκολα άρθρα και να κάνει κύλιση στο περιεχόμενο, ο ιστότοπος πρέπει να έχει ένα κουμπί "Top".

Το κουμπί "Επιστροφή στην κορυφή" είναι ένα μικρό εικονίδιο βέλους στο οποίο, όταν κάνετε κλικ, μετακινείται γρήγορα η σελίδα προς τα επάνω.

Έτσι, εάν ο χρήστης αρχίσει να διαβάζει ένα άρθρο ή αποφασίσει να δει τι γράφεται στα σχόλια, δεν θα χρειαστεί να δυσκολευτεί να κάνει κύλιση στον ιστότοπο αργότερα. Αντί να χρησιμοποιεί την τυπική κύλιση του προγράμματος περιήγησης, θα κάνει κλικ στο εικονίδιο του κουμπιού "Επιστροφή στην κορυφή" και θα μετακινηθεί ομαλά στην κορυφή της σελίδας. Αυτό είναι πολύ βολικό και πρακτικά προϋπόθεση για οποιονδήποτε "μεγάλο" (αν οι σελίδες των πόρων είναι τόσο μεγάλες που πρέπει να κάνετε κύλιση μέσα από αυτές) ιστότοπο. Αυτό το άρθρο θα εξετάσει τις προσθήκες για την προσθήκη ενός κουμπιού "Επιστροφή στην κορυφή".

Το jQuery Smooth Scroll είναι μια βολική και γρήγορη ενότητα για την ενεργοποίηση του κουμπιού "Top" στον ιστότοπο. Για να προσθέσετε ένα τέτοιο κουμπί σε έναν πόρο, απλώς κατεβάστε και εγκαταστήστε το πρόσθετο. Αμέσως μετά την ενεργοποίηση, εμφανίζεται ένα μικρό αιωρούμενο κουμπί στο πλάι των σελίδων. Θα διευκολύνει πολύ την ανάγνωση μεγάλων άρθρων και το γύρισμα σελίδων. Το κουμπί έχει κομψό σχεδιασμό και δεν θα χαθεί στο φόντο του προτύπου WordPress.

Και αν γνωρίζετε τις δυνατότητες της γλώσσας προγραμματισμού CSS, μπορείτε να προσαρμόσετε ανεξάρτητα το κουμπί "Top" κατά την κρίση σας. Συνολικά, η προσθήκη jQuery Smooth Scroll είναι αρκετή για να ικανοποιήσει τις ανάγκες των περισσότερων webmasters, αλλά θα καλύψουμε μερικά ακόμη δημοφιλή εργαλεία σε περίπτωση που αυτή η ενότητα δεν λειτουργεί για εσάς.

Ομαλή κύλιση προς τα πάνω

Ακολουθεί η εξίσου δημοφιλής προσθήκη Smooth Scroll Up - αυτό είναι ένα εξαιρετικά απλό και διαισθητικό εργαλείο που θα σας επιτρέψει να δημιουργήσετε ένα εικονίδιο "Επιστροφή στην κορυφή" στο πλάι του ιστότοπου μέσα σε λίγα λεπτά. Αν και η μονάδα δεν έχει πολλές ρυθμίσεις, είναι πολύ λειτουργική. Τα ακόλουθα είναι τα κύρια χαρακτηριστικά της προσθήκης Smooth Scroll Up:

μπορείτε να επιλέξετε μεταξύ διαφορετικών τύπων στοιχείου "Κορυφαία" (κείμενο με σύνδεσμο, εικονίδιο, εικόνα κ.λπ.)
Μπορείτε να επιλέξετε μόνοι σας το στοιχείο κύλισης από τη δική σας συλλογή.
Μπορείτε να προσθέσετε το δικό σας σχόλιο κοντά στο κουμπί κύλισης στην κορυφή.
η θέση του στοιχείου στον ιστότοπο είναι ρυθμιζόμενη (εάν χρειάζεται μόνο για εύκολη ανάγνωση της σελίδας, τότε είναι καλύτερα να το τοποθετήσετε στη δεξιά πλευρά, αλλά το πρόσθετο σάς επιτρέπει να το τοποθετήσετε στην αριστερή πλευρά και στο κέντρο);
μπορείτε να προσθέσετε εξαιρέσεις για προβολή σε διαφορετικά μέρη του ιστότοπου (απενεργοποιήστε την εμφάνιση του κουμπιού "Επιστροφή στην κορυφή" στην κύρια σελίδα ή απενεργοποιήστε το σε οποιαδήποτε άλλη σελίδα).
Η ενότητα λειτουργεί επίσης σε εκδόσεις του ιστότοπου για κινητές συσκευές (εάν είναι απαραίτητο, για το τηλέφωνο μπορεί να αφαιρεθεί το κουμπί "Top").
υπάρχουν κινούμενα σχέδια για κύλιση (slide και fade, ή χωρίς εφέ κίνησης).
μπορείτε να καθορίσετε την απόσταση μετά την οποία θα εμφανιστεί το κουμπί "Top" (αυτό είναι πιο βολικό για ανάγνωση, επειδή το στοιχείο δεν θα εμφανιστεί αμέσως μετά την είσοδο στον ιστότοπο, αλλά θα εμφανιστεί μόνο την κατάλληλη στιγμή).
μπορείτε να προσθέσετε έναν σύνδεσμο στο κουμπί "Επιστροφή στην κορυφή" για να ανοίξετε τη σελίδα σε μια νέα καρτέλα.
Είναι δυνατό να προσθέσετε τις δικές σας παραμέτρους CSS για το στοιχείο.

WPFront Scroll Top

Αυτό το πρόσθετο είναι τέλειο για όσους δεν θέλουν να σκεφτούν ανεξάρτητα πώς θα είναι το κουμπί. Εάν θέλετε απλώς να διευκολύνετε τους χρήστες να διαβάζουν και να περιηγούνται, ενώ εξακολουθείτε να έχετε ένα ενδιαφέρον κουμπί κύλισης, τότε το WPFront Scroll Top είναι αυτό που χρειάζεστε. Η ενότητα περιέχει μια μεγάλη συλλογή από έτοιμα εικονίδια. Και αν δεν θέλετε να μειώσετε την προσοχή του χρήστη με το εικονίδιο "Επόμενο", μπορείτε απλά να προσθέσετε κυλιόμενο κείμενο χωρίς εικόνα.

Η προσθήκη WPFront Scroll Top μπορεί εύκολα να εγκατασταθεί στη μηχανή WordPress. Περιέχει πολλές ρυθμίσεις, όπως:

κουμπί ενεργοποίησης/απενεργοποίησης.
μέγεθος εικονιδίου?
βαθμός διαφάνειας·
Ταχύτητα κύλισης.
προσθήκη αυτόματης απόκρυψης του κουμπιού μετά από έναν καθορισμένο αριθμό δευτερολέπτων.
γράφοντας την ετικέτα Alt για το στοιχείο.
σχέδιο χρώματος και φόντου του κειμένου του κουμπιού (το κύριο πράγμα είναι ότι για να γίνει η επιγραφή άνετη στην ανάγνωση, πρέπει να είναι εκφραστική).

Λάβετε υπόψη ότι το παρεχόμενο εργαλείο δεν είναι διαθέσιμο στα ρωσικά. Αλλά επειδή δεν υπάρχει τίποτα ιδιαίτερο για ανάγνωση στις ρυθμίσεις, δεν θα πρέπει να υπάρχουν δυσκολίες στη χρήση.

Κάντε κύλιση Επιστροφή στην κορυφή

Ακολουθεί μια άλλη προσθήκη που θα βελτιώσει τη χρηστικότητα του πόρου σας - το εργαλείο Scroll Back To Top. Περιέχει επίσης πολλές επιλογές προσαρμογής. Μπορείτε να απενεργοποιήσετε ένα στοιχείο ανά πάσα στιγμή, να το κάνετε αδιαφανές ή να δημιουργήσετε μια προεπισκόπηση του εικονιδίου. Το μέγεθος και το χρώμα του στοιχείου προσαρμόζονται εύκολα. Μπορείτε να προσαρμόσετε την απόσταση από την "κορυφή" του ιστότοπου, αφού περάσετε την οποία εμφανίζεται το κουμπί. Η θέση του στοιχείου στα αριστερά, δεξιά και στη μέση της σελίδας.

Η προσθήκη Scroll Back To Top δεν περιέχει μεγάλο αριθμό τύπων εικονιδίων. Συνολικά είναι περίπου 10. Εάν είναι απαραίτητο, μπορείτε να απενεργοποιήσετε το εικονίδιο και να αφήσετε μόνο το κείμενο («Επόμενο», «Πάνω» κ.λπ.). Το μέγεθος των εικονιδίων προσαρμόζεται σε ειδική κλίμακα από ένα έως έξι. Για να ενεργοποιήσετε ένα μεμονωμένο στυλ, στις παραμέτρους του στοιχείου υπάρχει ένα στοιχείο "Extra CSS" για να προσθέσετε το δικό σας σχέδιο.

Δυναμική προσθήκη "To Top".

Αυτή είναι μια αγγλική ενότητα για την τοποθέτηση ενός κουμπιού "Επιστροφή στην κορυφή" σχεδόν σε οποιαδήποτε θέση στον ιστότοπο. Με αυτό, η ανάγνωση και το γύρισμα της σελίδας θα είναι πολύ πιο εύκολη, επειδή το κουμπί μπορεί να τοποθετηθεί σε μία από τις τέσσερις θέσεις. Το πρόσθετο έχει ρυθμιστεί στα Αγγλικά. Το κουμπί μπορεί να ενεργοποιηθεί/απενεργοποιηθεί για την έκδοση του πόρου για κινητά. Η ταχύτητα κύλισης είναι ρυθμιζόμενη.

Είναι ενδιαφέρον ότι το Dynamic "To Top" Plugin λειτουργεί με προσωρινή αποθήκευση, έτσι οι τακτικοί χρήστες θα μπορούν να διαβάζουν τις αναρτήσεις σας και να κάνουν κύλιση στις σελίδες χωρίς καθυστέρηση του προγράμματος περιήγησης. Η μονάδα εμφανίζεται τέλεια σε υπολογιστές νέας και παλιάς γενιάς.

Εφαρμογή Skysa Scroll-to-Top

Ακολουθεί η εφαρμογή Skysa Scroll-to-Top, μια προσθήκη που είναι εντελώς διαφορετική από τους ανταγωνιστές της. Δεν θα το χρησιμοποιήσετε μόνο για να προσθέσετε ένα κουμπί "Επιστροφή στην κορυφή", αλλά μπορείτε επίσης να χρησιμοποιήσετε αυτό το εργαλείο για να δημιουργήσετε μια ολόκληρη γραμμή γραφικών στοιχείων. Για παράδειγμα, μπορείτε να προσθέσετε ένα αιωρούμενο μπλοκ με δημοσκοπήσεις, κουμπιά μέσων κοινωνικής δικτύωσης και ένα στοιχείο κύλισης σελίδας. Και για να μην επιβραδύνει το plugin τον ιστότοπο, λειτουργεί με την προσωρινή μνήμη του προγράμματος περιήγησης. Οι δυνατότητες αυτής της ενότητας είναι πρακτικά απεριόριστες - μπορείτε ακόμη και να προσθέσετε συνδέσμους σε μια γραμμή με ένα κουμπί κύλισης.

συμπέρασμα

Η λήψη ενός από αυτά τα πρόσθετα δεν κοστίζει τίποτα για εσάς. Αλλά θα έχει μεγάλο όφελος για τον ιστότοπο. Τα κουμπιά «Επόμενο», «Πάνω», «Πίσω» κ.λπ. θα κάνουν τη ζωή των επισκεπτών των πόρων πολύ πιο εύκολη. Πιστέψτε με, θα είναι ευγνώμονες! Και μαζί τους - μηχανές αναζήτησης, αφού όσο πιο βολικός είναι ένας ιστότοπος, τόσο υψηλότερη είναι η θέση του στην αναζήτηση.

Γεια σας αγαπητοί αναγνώστες Σε αυτό το άρθρο θα σας πω πώς να εγκαταστήσετε ένα κουμπί "πίσω στην κορυφή" για ένα ιστολόγιο WordPress. Υπάρχουν δύο τρόποι για να δημιουργήσετε αυτό το κουμπί. Η πρώτη μέθοδος είναι να εγκαταστήσετε ένα ειδικό πρόσθετο. Και το δεύτερο είναι να αλλάξετε τον κώδικα php στα αρχεία του ενεργού θέματός σας.

Σε γενικές γραμμές, μπορείτε εύκολα να κάνετε χωρίς αυτό το κουμπί. Έχετε ήδη αυτό το κουμπί στο πληκτρολόγιό σας, που ονομάζεται "σπίτι". Κάνοντας κλικ στο οποίο θα μεταφερθείτε γρήγορα στην κορυφή της σελίδας.

Πολλοί webmasters εγκαθιστούν αυτό το κουμπί στον ιστότοπό τους. Μερικοί το εγκαθιστούν για να διευκολύνουν τους χρήστες να πλοηγηθούν στον ιστότοπο, αλλά για άλλους, είναι αναπόσπαστο μέρος του σχεδιασμού.

1.Εγκατάσταση κουμπιού με χρήση πρόσθετου.

Ο ευκολότερος τρόπος για να δημιουργήσετε ένα κουμπί up είναι να εγκαταστήσετε και να ενεργοποιήσετε το πρόσθετο. Μπορείτε να το κατεβάσετε από το επίσημο αποθετήριο πρόσθετων στο wordpress.org. Συνιστώ να κατεβάζετε πρόσθετα μόνο από εκεί, ώστε να έχετε λιγότερες πιθανότητες να μολύνετε τον ιστότοπό σας με ιό.

Υπάρχουν πολλές προσθήκες που σας επιτρέπουν να προσθέσετε ένα κουμπί στην κορυφή, αλλά αποφάσισα να επιλέξω την προσθήκη Scroll Back To Top ως παράδειγμα. Κατεβάστε το, ανεβάστε το και ενεργοποιήστε το.

Το πρόσθετο έχει έναν αριθμό ρυθμίσεων. Αλλά δεν χρειάζεται να αγγίξετε τα πάντα. Το μόνο που χρειάζεται να κάνετε είναι να προσαρμόσετε τη θέση και την εμφάνιση του κουμπιού.

Όπως μπορείτε να δείτε, δεν υπάρχει τίποτα δύσκολο να συνδέσετε ένα κουμπί στην κορυφή χρησιμοποιώντας ένα πρόσθετο, να το κατεβάσετε, να το ενεργοποιήσετε και όλα λειτουργούν. Πού θα μπορούσε να είναι πιο εύκολο; Αλλά στην πραγματικότητα, δεν είναι όλα τόσο καλά όσο φαίνονται με την πρώτη ματιά. Το γεγονός είναι ότι με κάθε εγκατεστημένο πρόσθετο, το WordPress σας γίνεται πιο παχύ και πιο αργό, κάτι που δεν είναι καλό. Επομένως, πολλοί έμπειροι bloggers, όποτε είναι δυνατόν, προσπαθούν να μην χρησιμοποιούν πρόσθετα, αλλά να επεξεργάζονται απευθείας τον κώδικα.

Κουμπί επάνω για τον ιστότοπο - περισσότερες από 7 δοκιμασμένες λύσεις - 4,6 από 5 με βάση 73 ψήφους

Το κουμπί "Επιστροφή στην κορυφή" παίζει μεγάλο ρόλο στη βελτίωση της εμπειρίας του χρήστη, ειδικά σε εκείνες τις σελίδες που είναι γεμάτες με περιεχόμενο. Και επειδή στις μέρες μας το περιεχόμενο για έναν ιστότοπο είναι το πιο σημαντικό πράγμα, υπάρχει, κατά κανόνα, όλο και περισσότερο στις σελίδες και ο καλύτερος τρόπος για να ανακατευθύνετε τον επισκέπτη στην κορυφή της σελίδας είναι διάφορα ειδικά κουμπιά. θα εξετάσει πώς να δημιουργήσετε ένα κουμπί στην κορυφή για τον ιστότοπό σας σε αυτό το άρθρο.

Σε τι χρησιμεύει αυτό το κουμπί και σε ποιες περιπτώσεις είναι καλύτερο να το χρησιμοποιήσετε;

Όταν μια σελίδα ιστότοπου περιέχει μεγάλο όγκο περιεχομένου, ο χρήστης, αφού το διαβάσει και έκανε κύλιση στη σελίδα σε ένα ορισμένο σημείο ή στο κάτω μέρος, συχνά αρχίζει να κάνει κύλιση στην κορυφή για να δει τους συνδέσμους πλοήγησης που βρίσκονται στο επάνω μέρος της σελίδας και/ή εκτελέστε κάποιες ενέργειες.

Για να προσθέσετε ευκολία στους χρήστες και γενικά να βελτιώσετε τη χρηστικότητα του ιστότοπού σας, είναι καλύτερο να χρησιμοποιήσετε ένα κουμπί επάνω για τον ιστότοπο, κάνοντας κλικ στο οποίο ο χρήστης ανακατευθύνεται αυτόματα στην κορυφή της σελίδας.

1. Απλό κουμπί "Επιστροφή στην κορυφή" χωρίς JavaScript

Υπάρχει ένας πολύ απλός τρόπος να παρέχετε στον χρήστη μια τέτοια λειτουργικότητα. Αυτή η μέθοδος δεν απαιτεί τη χρήση βιβλιοθηκών ή πρόσθετων σεναρίων και γίνεται αποκλειστικά με χρήση HTML και, εάν είναι επιθυμητό, με χρήση CSS, με τη δημιουργία ενός συνηθισμένου εσωτερικού συνδέσμου.

Για να το κάνετε αυτό οπουδήποτε στο κάτω μέρος της σελίδας σας, απλώς προσθέστε τον ακόλουθο κώδικα:

^ Κορυφή

Παράδειγμα κώδικα CSS:

Επάνω κουμπί ( πλάτος: 100 εικονοστοιχεία; περίγραμμα: 2 εικονοστοιχεία συμπαγές #cccc; φόντο:#f7f7f7; στοίχιση κειμένου: κέντρο; συμπλήρωση: 10 εικονοστοιχεία; θέση: σταθερό; κάτω: 50 εικονοστοιχεία; δεξιά: 50 εικονοστοιχεία; δρομέας: δείκτης; χρώμα: #333; γραμματοσειρά -family:verdana; μέγεθος γραμματοσειράς: 12px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; )

Ελαττώματα:

Τα κουμπιά που γίνονται με χρήση JavaScript μπορούν να κινούνται και να εμφανίζονται αμέσως μόλις ο χρήστης μετακινηθεί λίγο πιο κάτω στη σελίδα, αλλά στο παραπάνω παράδειγμα θα εμφανίζεται συνεχώς.

Η κύλιση δεν θα είναι ομαλή και αφού κάνει κλικ ο χρήστης θα ανακατευθυνθεί αμέσως στην κορυφή της σελίδας.

Τα πλεονεκτήματα αυτού του τύπου κουμπιών:

Για να χειριστείτε το κουμπί, δεν χρειάζεται να χρησιμοποιήσετε σενάρια ή μεγάλες βιβλιοθήκες. Και αυτό είναι ένα πολύ μεγάλο συν.

2. Κουμπί επιστροφής στην κορυφή χρησιμοποιώντας jQuery

Το κουμπί υλοποιείται πολύ απλά. Για τη λειτουργία του θα χρειαστείτε τη βιβλιοθήκη jQuery, ένα μικρό σενάριο που περιέχει συμβάντα jQuery, ορισμένα στυλ και μια ετικέτα DIV που περιέχει το ίδιο το κείμενο και το απαιτούμενο αναγνωριστικό.

Το κουμπί λειτουργεί σε προγράμματα περιήγησης ξεκινώντας από τις εκδόσεις Firefox 3.0.10 - 3.6.13, Internet Explorer 7 και 8, Google Chrome, Jquery 1.4.3. Δυστυχώς το κουμπί δεν λειτουργεί στον IE 6, αλλά το χρειάζεστε :);

Κώδικας JavaScript JQuery:

Πρέπει να εισαγάγετε τον παρακάτω κώδικα πριν από την ετικέτα σε όλες τις σελίδες του ιστότοπού σας. Εάν η βιβλιοθήκη jQuery είναι ήδη συνδεδεμένη στον ιστότοπό σας, τότε δεν χρειάζεται να προσθέσετε την πρώτη γραμμή.

$(function() ( $(window).scroll(function() ( if($(this).scrollTop() != 0) ( $("#toTop").fadeIn(); ) else ( $(" #toTop").fadeOut(); ) )); $("#toTop").κάντε κλικ(function() ($("body,html").animate((scrollTop:0),800); )); ));

Για να δώσετε στο κουμπί μια όμορφη εμφάνιση, πρέπει να προσθέσετε τα ακόλουθα στυλ. Αυτά προστίθενται καλύτερα στο φύλλο στυλ του ιστότοπού σας.

#toTop (πλάτος:100px; περίγραμμα:1px συμπαγές #cccc; φόντο:#f7f7f7; text-align:center; padding:5px; position:fixed; bottom:10px; /* εσοχή κουμπιού από το κάτω άκρο της σελίδας*/ δεξιά: 10 εικονοστοιχεία; δρομέας: δείκτης; εμφάνιση: κανένα; χρώμα:#333; γραμματοσειρά-οικογένεια: verdana; μέγεθος γραμματοσειράς: 11 εικονοστοιχεία; )

Για να καλέσετε το κουμπί, προσθέστε τον ακόλουθο κώδικα HTML πριν από την ετικέτα.

^ Κορυφή

3. Πρόσθετο UItoTop JQuery

Μια απλή προσθήκη που κάνει ένα κουμπί να εμφανίζεται ομαλά και να μετακινείται ομαλά προς τα πάνω όταν κάνετε κλικ σε αυτό. Για να χρησιμοποιήσετε την προσθήκη στον ιστότοπό σας, δεν χρειάζεται να προσθέσετε ετικέτες στη σήμανση HTML της σελίδας. Απλώς συνδέστε όλα τα απαραίτητα αρχεία plugin και θα λειτουργήσει.

Πηγές

Το αρχείο που παρουσιάζεται περιέχει 3 φακέλους: css - αρχείο στυλ κουμπιού, img - εικόνα και φάκελο js που περιέχει 4 αρχεία JavaScript.

Σύνδεση αρχείων JavaScript:

Αποσυσκευάστε το ληφθέν αρχείο με πηγές σε οποιονδήποτε φάκελο στον ιστότοπό σας. Για να χρησιμοποιήσουμε το πρόσθετο, πρέπει απλώς να συνδέσουμε τρία από τα διαθέσιμα αρχεία js. Για να τα συμπεριλάβετε, προσθέστε τις ακόλουθες διαδρομές αρχείου πριν από την ετικέτα κλεισίματος:

$(document).ready(function() ( /* var defaults = ( containerID: "toTop", // fading element id containerHoverID: "toTopHover", // fading element hover id scrollSpeed: 1200, easingType: "linear" ) ; */ $().UItoTop(( easingType: "easeOutQuart" )); ));

Διορθώστε τις διαδρομές που οδηγούν στα αρχεία σύμφωνα με τον κατάλογο στον οποίο βρίσκονται τα αρχεία πρόσθετων.

Λάβετε υπόψη ότι εάν έχετε συνδέσει προηγουμένως τη βιβλιοθήκη jQuery στον ιστότοπό σας, τότε δεν χρειάζεται να προσθέσετε τον ακόλουθο κώδικα:

Προσθήκη CSS:

Το επόμενο βήμα είναι να προσθέσετε στυλ CSS, χωρίς αυτά το κουμπί δεν θα λειτουργήσει. Υπάρχουν δύο τρόποι σύνδεσης.

Ο πρώτος τρόπος είναι να προσθέσετε έναν σύνδεσμο στο αρχείο στυλ CSS μεταξύ ετικετών σε όλες τις σελίδες του ιστότοπού σας:

Απλώς θυμηθείτε να αλλάξετε τη διαδρομή του αρχείου.

Ο δεύτερος τρόπος είναι να αντιγράψετε ολόκληρο το περιεχόμενο του αρχείου ui.totop.css και να το επικολλήσετε στο αρχείο φύλλου στυλ CSS του ιστότοπού σας. Η δεύτερη μέθοδος θα είναι πιο ορθολογική αφού δεν απαιτεί τη σύνδεση περιττών αρχείων.

4. Κάντε κύλιση με τα κουμπιά πάνω και κάτω στο JQUERY

Αυτή η λύση σάς επιτρέπει να μετακινηθείτε προς τα κάτω και προς τα πάνω στη σελίδα επειδή αποτελείται από δύο κουμπιά. Τα κουμπιά βρίσκονται σταθερά στην αριστερή πλευρά της σελίδας. Κατά την κύλιση, τα κουμπιά τρεμοπαίζουν ομαλά. Μπορείτε να δείτε αυτό το εφέ προβάλλοντας την επίδειξη.

Πηγές

Το ληφθέν αρχείο θα περιέχει όλα τα αρχεία που είναι απαραίτητα για τη λειτουργία του κουμπιού. Αυτά είναι αρχεία CSS, JS και αρχεία εικόνας με βέλη.

Σύνδεση HTML:

Πρώτα πρέπει να τοποθετήσετε τον κώδικα HTML για την κλήση των κουμπιών σε όλες τις σελίδες του ιστότοπου. Για να το κάνετε αυτό, τοποθετήστε το παρακάτω κείμενο αμέσως πριν από την ετικέτα.

Σύνδεση JavaScript:

Αμέσως μετά τον κώδικα HTML, πριν από την ετικέτα, τοποθετήστε τον κωδικό για την κλήση των απαραίτητων αρχείων JavaScript και του κώδικα JQuery.

$(function() ( var $elem = $("#content"); $("#nav_up").fadeIn("slow"); $("#nav_down").fadeIn("slow"); $( window).bind("scrollstart", function())( $("#nav_up,#nav_down").stop().animate(("αδιαφάνεια":"0.2")); )); $(παράθυρο). bind ("scrollstop", function())( $("#nav_up,#nav_down").stop().animate(("αδιαφάνεια":"1")); )); $("#nav_down"). click( συνάρτηση (e) ( $("html, body").animate((scrollTop: $elem.height()), 800); )); $("#nav_up").click(function (e) ( $( "html, body").animate((scrollTop: "0px"), 800); )); ));

Οι διαδρομές που οδηγούν στα αρχεία JS πρέπει να αντικατασταθούν με τις δικές σας.

Η πρώτη γραμμή κώδικα περιλαμβάνει τη βιβλιοθήκη JQuery, οπότε αν την έχετε ήδη συνδέσει με τον ιστότοπό σας στο παρελθόν, τότε πρέπει να την αφαιρέσετε.

Στη συνέχεια ακολουθεί η σύνδεση ενός άλλου αρχείου JS και κώδικα που περιέχει ορισμένες λειτουργίες που πρέπει να εξεταστούν λεπτομερέστερα. Γιατί με τη βοήθειά τους μπορείτε να αλλάξετε κάποιες παραμέτρους των κουμπιών. Ακολουθεί ο κώδικας με επεξηγήσεις:

// περιεχόμενο είναι το αναγνωριστικό του div μέσα στο οποίο θα πρέπει να βρίσκεται όλο το περιεχόμενο που πρέπει να κύλιση, εάν όλο το περιεχόμενο των σελίδων του ιστότοπού σας βρίσκεται σε διαφορετικό αναγνωριστικό, τότε μπορείτε να το εισαγάγετε εδώ, γιατί χωρίς αυτό τα κουμπιά θα δεν λειτουργεί $(function( ) ( var $elem = $("#content"); // χρησιμοποιώντας τις δύο επόμενες γραμμές, τα κουμπιά εμφανίζονται $("#nav_up").fadeIn("slow"); $(" #nav_down").fadeIn(" slow"); // κατά την κύλιση, τα κουμπιά έχουν ένα εφέ ξεθώριασμα, αυτό υλοποιείται αλλάζοντας τη διαφάνειά τους, επομένως αλλάζοντας την ένδειξη 0,2 στην περιοχή από 0,1 σε 1, μπορείτε να προσαρμόσετε διαφάνεια $(window).bind("scrollstart", function ()( $("#nav_up,#nav_down").stop().animate(("αδιαφάνεια":"0.2")); )); // εδώ μπορείτε να προσαρμόσετε την ίδια διαφάνεια, αλλά τη στιγμή που τα κουμπιά εμφανίζονται απλά στη σελίδα, η προεπιλεγμένη τιμή είναι 1 $(window).bind("scrollstop", function())( $("#nav_up,#nav_down ").stop().animate(("αδιαφάνεια":"1" )); )); // αλλάζοντας τον αριθμό 800, μπορείτε να αυξήσετε ή να μειώσετε την ταχύτητα κύλισης της σελίδας $("#nav_down"). κάντε κλικ( συνάρτηση (e) ( $("html, body").animate((scrollTop: $elem .height()), 800); )); // ίδιο με το παραπάνω αλλά για κύλιση προς τα κάτω $("#nav_up").click(function (e) ( $("html, body").animate((scrollTop: "0px"), 800); ) ); ));

Σύνδεση CSS:

Για να προσθέσετε CSS, απλώς συνδέστε το αρχείο style.css που βρίσκεται στο αρχείο προέλευσης στις σελίδες του ιστότοπου:

Και η καλύτερη επιλογή θα ήταν να αντιγράψετε τα στυλ αυτού του αρχείου και να τα επικολλήσετε στο αρχείο στυλ του ιστότοπού σας.

5. Ομαλή κύλιση προς τα επάνω χρησιμοποιώντας το JQuery

Μια άλλη επιλογή για την οργάνωση της ομαλής κύλισης του περιεχομένου της σελίδας, από κάτω προς τα πάνω, χρησιμοποιώντας το JQuery. Το κουμπί βρίσκεται κάτω δεξιά στη σελίδα και εμφανίζεται μόνο αν κάνετε κύλιση προς τα κάτω στη σελίδα. Όλα υλοποιούνται χρησιμοποιώντας ένα μικρό κομμάτι κώδικα CSS και JS, καθώς και μια μικρή εικόνα που χρησιμοποιείται ως κουμπί.

Μου αρέσει αυτό το κουμπί γιατί η δημιουργία του δεν απαιτεί μεγάλο αριθμό σεναρίων και έχει καλά εφέ.

Τώρα ας καταλάβουμε τι πρέπει να γίνει για να συνδέσετε το κουμπί στον ιστότοπο

Εικόνα:

Θα χρειαστείτε μια εικόνα του ίδιου του κουμπιού, μπορείτε να πάρετε οποιοδήποτε ή μπορείτε να χρησιμοποιήσετε αυτό:

Για να καλέσετε ένα κουμπί μετά το περιεχόμενο της κύριας σελίδας ή πριν από μια ετικέτα, τοποθετήστε τον ακόλουθο κώδικα HTML:

Μπλουζα

Κύλιση (πλάτος: 40 εικονοστοιχεία, ύψος: 40 εικονοστοιχεία, αδιαφάνεια: 0,3, θέση: σταθερή, κάτω: 50 εικονοστοιχεία, δεξιά: 100 εικονοστοιχεία, οθόνη: καμία, εσοχή κειμένου: -9999 εικονοστοιχεία, φόντο: url ("icon_top.png") χωρίς επανάληψη ;)

Χρησιμοποιώντας αυτόν τον κωδικό, εκτός από την εμφάνιση, προσδιορίζουμε τη θέση του κουμπιού και ρυθμίζουμε το padding σε 100 px από δεξιά και 50 px από κάτω. Είναι καλύτερο να το προσθέσετε στο φύλλο στυλ του ιστότοπού σας.

Αρχικά, συνδέουμε τη βιβλιοθήκη εάν δεν είναι ήδη συνδεδεμένη για τον ιστότοπό σας. Για το σκοπό αυτό μεταξύ ετικετών...; εισάγετε τα εξής:

Στη συνέχεια, αμέσως μετά τη συμπερίληψη της βιβλιοθήκης, πρέπει να τοποθετήσετε τον ακόλουθο κώδικα JQuery:

$(document).ready(function())( $(window).scroll(function())( if ($(this).scrollTop() > 100) ( $(".scrollup").fadeIn(); ) else ( $(".scrollup").fadeOut(); )); $(".scrollup").κάντε κλικ(function())($("html, body").animate(( scrollTop: 0 ), 600) ; επιστροφή ψευδής; )); ));

Το πρώτο ScrollTop - καθορίζει την τρέχουσα κατακόρυφη θέση της γραμμής κύλισης και αν γίνει μεγαλύτερη από 100 px, εμφανίζεται αυτόματα το κουμπί. Εάν θέλετε να εμφανίζεται νωρίτερα ή αργότερα, αλλάξτε αυτήν την τιμή όπως απαιτείται.

Όπως μπορείτε να δείτε, υπάρχουν δύο ακόμη παράμετροι - 0 - που σημαίνει ότι η σελίδα θα πραγματοποιήσει κύλιση μέχρι την αρχή μέχρι το μηδέν pixel και 600 - αυτή είναι η ταχύτητα κίνησης σε χιλιοστά του δευτερολέπτου.

Πηγή: http://gazpo.com/2012/02/scrolltop/

6. Κουμπί με κίνηση προς τα πάνω

Όταν κάνετε κύλιση στη σελίδα με έναν συγκεκριμένο αριθμό χαρακτήρων προς τα κάτω, ένα μεγάλο κουμπί με ένα βέλος εμφανίζεται κάτω αριστερά. Όταν τοποθετείτε τον κέρσορα, το κουμπί ανάβει ομαλά και όταν κάνετε κλικ, μετακινείται ομαλά προς τα πάνω.

Μια εικόνα βέλους, στυλ CSS και JQuery χρησιμοποιούνται για τη δημιουργία του κουμπιού.

Εικόνα:

Κώδικας HTML:

Για να καλέσετε το κουμπί, χρησιμοποιήστε τον ακόλουθο κώδικα HTML:

Επιστροφή στην κορυφή

Αλλά πρέπει να το τοποθετήσετε απευθείας πριν από το κύριο περιεχόμενο της σελίδας· εάν το τοποθετήσετε πριν από την ετικέτα κλεισίματος, το κουμπί δεν θα λειτουργήσει.

Και ένα ακόμη σημαντικό σημείο σχετικά με τον κώδικα HTML. Πρέπει να αντιστοιχίσετε το αναγνωριστικό επάνω στην ετικέτα.

Εάν στην ετικέτα έχει ήδη εκχωρηθεί ένα συγκεκριμένο αναγνωριστικό, τότε στον κωδικό κλήσης του κουμπιού που βρίσκεται ακριβώς πάνω, το #top πρέπει να αντικατασταθεί με το #your-id

Η πλήρωση και η εμφάνιση του κουμπιού ορίστηκαν χρησιμοποιώντας CSS· προστέθηκε μια ιδιότητα μετάβασης για τη δημιουργία ενός εφέ καθυστέρησης κατά την αιώρηση του δρομέα. Είναι καλύτερα να το εισάγετε στο αρχείο CSS του ιστότοπού σας.

#back-top ( θέση: σταθερό; κάτω: 30 εικονοστοιχεία; περιθώριο-αριστερό: -150 εικονοστοιχεία; ) #back-top a (πλάτος: 108 εικονοστοιχεία; οθόνη: μπλοκ; στοίχιση κειμένου: κέντρο; γραμματοσειρά: 11 εικονοστοιχεία/100% Arial, Helvetica , sans-serif; text-transform: κεφαλαία; text-decoration: none; color: #bbb; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; ) #back-top a:hover ( color: #000; ) /* εικονίδιο βέλους (span tag) */ #back-top span ( πλάτος: 108px; ύψος: 108px; display: block; margin-bottom: 7px; background: #ddd url( up-arrow.png) κέντρο χωρίς επανάληψη· /* στρογγυλεμένες γωνίες */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* transition */ -webkit- μετάβαση: 1s; -moz-transition: 1s; μετάβαση: 1s; ) #back-top a:hover span (χρώμα φόντου: #777; )

$(document).ready(function())( // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () ( $( window ).scroll(function () ( if ($(this).scrollTop() > 100) ( $("#back-top").fadeIn(); ) else ($("#back-top"). fadeOut (); ) )); // κύλιση σώματος σε 0px κάνοντας κλικ στο $("#back-top a").click(function () ($("body,html").animate(( scrollTop: 0 ), 800 ); επιστροφή ψευδής; )); )); ));

Η πρώτη γραμμή συνδέει τη βιβλιοθήκη JQuery, αν την έχετε ήδη συνδεδεμένη, μην προσθέσετε αυτήν τη γραμμή. Προσθέστε τον υπόλοιπο κώδικα μεταξύ των ετικετών...

Εάν είναι απαραίτητο, μπορείτε να αλλάξετε τις ακόλουθες παραμέτρους:

100 είναι ο αριθμός των pixel μετά από τα οποία εμφανίζεται το κουμπί μετά την κύλιση.
0 - αυτό σημαίνει ότι η κύλιση θα γίνει στο μηδέν pixel, δηλαδή στην κορυφή.
800 είναι η ταχύτητα κύλισης σε χιλιοστά του δευτερολέπτου.

7. Ημιδιαφανές κουμπί με χρήση JQuery και CSS

Ένα μεγάλο ημιδιαφανές κουμπί επάνω εμφανίζεται όταν κάνετε κύλιση στο κέντρο της σελίδας. Είναι δύσκολο να μην την προσέξεις. Δημιουργείται μόνο με χρήση JQuery και CSS.

Ας καταλάβουμε την HTML:

Για να λειτουργήσει το κουμπί, το περιεχόμενο της κύριας σελίδας που χρειάζεται κύλιση πρέπει να τοποθετηθεί μεταξύ δύο ετικετών:

Δεν υπάρχει τίποτα ιδιαίτερο εδώ, απλώς επικολλήστε αυτόν τον κώδικα στο αρχείο στυλ CSS του ιστότοπού σας.

#message a ( /* εμφάνιση: αποκλεισμός πριν από την απόκρυψη */ εμφάνιση: μπλοκ; εμφάνιση: κανένας; /* ο σύνδεσμος είναι πάνω από όλα τα άλλα στοιχεία */ z-index: 999; /* ο σύνδεσμος δεν κρύβει το κείμενο πίσω του */ αδιαφάνεια : .8; /* ο σύνδεσμος παραμένει στο ίδιο σημείο στη σελίδα */ θέση: σταθερή; /* ο σύνδεσμος βρίσκεται στο κάτω μέρος της σελίδας */ επάνω: 100%; περιθώριο-πάνω: -80 εικονοστοιχεία; /* = ύψος + προτιμώμενο κάτω μέρος περιθώριο */ /* ο σύνδεσμος είναι κεντραρισμένος */ αριστερά: 50%, περιθώριο-αριστερά: -160 εικονοστοιχεία, /* = μισό πλάτος */ /* γύρω από τις γωνίες (κατά την προτίμησή σας) */ -moz-border-radius: 24 px ; -webkit-border-radius: 24px; /* κάνει το μεγάλο και ευδιάκριτο (μέγεθος, στυλ σύμφωνα με τις προτιμήσεις) */ πλάτος: 300px, line-height: 48px, height: 48px, padding: 10px, background-color: #000; μέγεθος γραμματοσειράς: 24 εικονοστοιχεία, στοίχιση κειμένου: κέντρο, χρώμα: #fff;

$(function () ( /* ορίστε τις μεταβλητές τοπικά για αυξημένη απόδοση */ var scroll_timer; var displayed = false; var $message = $("#message a"); var $window = $(window); var top = $ (document.body).children(0).position().top; /* react to scroll event στο παράθυρο */ $window.scroll(function () ( window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () ( if($window.scrollTop() 0 || y > 0) ( var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")" window.setTimeout(invokeFunction, time); ) επιστροφή false; ) //* συνάρτηση scrollTop())( var el = $("gotop"); var stop = (document.body.scrollTop || document.documentElement.scrollTop); if(stop>400)( if( el .style.display!="block")( el.style.display="block"; smoothopaque(el, 0, 100, 1); ) ) other el.style.display="none"; return false; ) / / Ομαλή αλλαγή της λειτουργίας διαφάνειας smoothopaque(el, startop, endop, inc)( op = startop; // Set transparency setopacity(el, op); // Start change transparency setTimeout(slowopacity, 1); συνάρτηση slowopacity())( if(startop endop)( setTimeout(slowopacity, 1); ) ) setopacity(el, op); ) ) // ρύθμιση της συνάρτησης αδιαφάνειας setopacity(el, αδιαφάνεια)( el.style.opacity = (opacity/100); el.style.filter = "alpha(opacity=" + αδιαφάνεια + ")"; ); if (window.addEventListener)( window.addEventListener("scroll", scrollTop, false); window.addEventListener("load", scrollTop, false); ) else if (window.attachEvent)( window.attachEvent("onscroll", scrollTop); window.attachEvent("onload", scrollTop); ) window["top"] = (); window["top"]["goTop"] = goTop; ))();

Πιθανότατα, στον ριζικό φάκελο του blog ή του ιστότοπού σας στη φιλοξενία (συνήθως public_html) υπάρχει ένας κατάλογος js με αρχεία JavaScript. Εκεί δημιουργείτε το αρχείο totop.js χρησιμοποιώντας το πρόγραμμα notepad++ που ήδη ανέφερα, εισάγοντας αυτόν τον κώδικα σε αυτό. Έτσι, η πλήρης διαδρομή προς το φρεσκοψημένο αρχείο αποδείχθηκε ως εξής:

/themes/cloudy/js/totop.js">

Τώρα πρέπει να δημιουργήσουμε μια εικόνα για το κουμπί "πάνω". Για να το κάνετε αυτό, μπορείτε να χρησιμοποιήσετε οποιοδήποτε πρόγραμμα επεξεργασίας γραφικών, συμπεριλαμβανομένου του προγράμματος προβολής φωτογραφιών FastStone Image Viewer (υπάρχει ένα λεπτομερές εγχειρίδιο σχετικά με αυτό το ενδιαφέρον πρόγραμμα). Μπορείτε επίσης να χρησιμοποιήσετε για αυτούς τους σκοπούς, για παράδειγμα, το Fotoshop, συμπεριλαμβανομένης της έκδοσης διαδικτυακών εφαρμογών, από τις οποίες υπάρχουν πολλές στο Διαδίκτυο.

Καταλαβαίνω ότι ορισμένοι άπειροι αναγνώστες μπορεί να έχουν κάποιες δυσκολίες αν θέλουν να βάλουν ένα όμορφο κουμπί στην κορυφή, το οποίο θα ταιριάζει επίσης στο σχέδιο. Επομένως, σε μια από τις προσεχείς δημοσιεύσεις θα αφιερώσω χρόνο σε αυτό και θα εξηγήσω λεπτομερώς πώς δημιούργησα ένα παρόμοιο εικονίδιο με τη μορφή ενός επάνω βέλους για το ιστολόγιό μου στο online Photoshop. Προς το παρόν, παρουσιάζω το τελικό αποτέλεσμα με τη μορφή sprite, συμπεριλαμβανομένων δύο σχεδίων:

Επιτρέψτε μου να εξηγήσω εν συντομία ότι ο συνδυασμός εικόνων φόντου ενός ιστότοπου σε sprites (στα αγγλικά sprite - fairy, ghost) καθιστά δυνατή τη μείωση του αριθμού των αιτημάτων http, συμβάλλοντας έτσι στην ευγενή αιτία της μείωσης του φόρτου στον διακομιστή. Σε αυτήν την περίπτωση, η δημιουργία ενός ξωτικού δύο βελών διασφαλίζει ότι η εμφάνιση της εικόνας αλλάζει όταν μετακινείται ο δρομέας του ποντικιού σε αυτήν, δηλαδή εμφανίζεται ένα εφέ κίνησης.

Φυσικά, μπορείτε εύκολα να κάνετε χωρίς να δημιουργήσετε ένα sprite κάνοντας ένα σχέδιο, αλλά εξετάζουμε μια πιο σύνθετη επιλογή για όσους το θέλουν. Επομένως, οι υποστηρικτές μιας απλούστερης επιλογής μπορούν εύκολα να αντικαταστήσουν το sprite με μια ενιαία εικόνα. Ολόκληρος ο παρεχόμενος αλγόριθμος θα είναι απολύτως πανομοιότυπος.

Έτσι, θα υποθέσουμε ότι το σχέδιο βέλους "πάνω" είναι έτοιμο (παρεμπιπτόντως, το βέλος μπορεί να αντικατασταθεί με μια άλλη εικόνα, για παράδειγμα, με τη μορφή ενός όμορφου κουμπιού). Στη συνέχεια, ανεβάζουμε την εικόνα στον διακομιστή, πάλι στη ρίζα του ιστότοπου (συνήθως υπάρχει ήδη ένας φάκελος IMAGES εκεί). Για τους σκοπούς αυτούς, σας συμβουλεύω να χρησιμοποιήσετε το πρόγραμμα FileZilla (ανάρτηση σχετικά με αυτόν τον πελάτη FTP), το οποίο είναι πολύ βολικό για τη μετακίνηση και την εργασία με εικόνες ή άλλο παρόμοιο λογισμικό. Η απόλυτη διαδρομή μου προς την εικόνα με δύο βέλη είναι η εξής:

/images/totop.png

Ωστόσο, για το url μιας εικόνας που εμφανίζεται με χρήση CSS, μπορείτε επίσης να χρησιμοποιήσετε μια σχετική διαδρομή:

/images/totop.png

Χρησιμοποιήστε και απόλυτες και σχετικές διευθύνσεις, δεν υπάρχει διαφορά. Λάβετε υπόψη ότι η πλήρης διεύθυνση URL σας μπορεί να είναι διαφορετική. Εξετάστε προσεκτικά την ένθεση των φακέλων, που καθορίζουν τα περιεχόμενα της διαδρομής. Το επόμενο βήμα είναι να ανοίξετε το αρχείο footer.php και να εισαγάγετε την ακόλουθη κατασκευή σε αυτό στο τέλος πριν από το κλείσιμο της ετικέτας σώματος:

Μην ξεχάσετε να αντικαταστήσετε το "path_to_file" με μια ακολουθία όλων των φακέλων που ορίζουν τη διεύθυνση URL ειδικά για το έργο σας. Και το τελευταίο βήμα. Πρέπει να ορίσετε τα στυλ CSS που πρέπει να προστεθούν στο αρχείο style.css του θέματος WordPress. Προσφέρω τη δική μου επιλογή:

#gotop ( θέση: σταθερό; κάτω: 60 εικονοστοιχεία; πλάτος: 56 εικονοστοιχεία; ύψος: 96 εικονοστοιχεία; περιθώριο-αριστερό: 1170 εικονοστοιχεία; φόντο: url(file_path/totop.png) χωρίς επανάληψη 0 0; )

Και εδώ, όταν περιγράφετε την ιδιότητα φόντου, μην ξεχάσετε να καθορίσετε τη διαδρομή προς το αρχείο totop.png (απόλυτη ή σχετική) ως τιμή url. Λάβετε υπόψη ότι η απόλυτη διαδρομή πρέπει να ξεκινά με "http://". Για να διασφαλίσουμε ότι η εμφάνιση του κουμπιού αλλάζει όταν μετακινείται ο κέρσορας σε αυτό, θα γράψουμε μια ακόμη συνθήκη στο ίδιο αρχείο style.css:

#gotop:hover ( φόντο: url(/path_to_file/totop.png) no-repeat -56px 0; )

Αλλά ο τελευταίος κανόνας CSS χρειάζεται να προστεθεί μόνο εάν αποφασίσετε να χρησιμοποιήσετε ένα sprite. Στην περίπτωση μιας μεμονωμένης εικόνας, δεν χρειάζεται να την καταχωρήσετε. Τώρα, όταν κάνετε κύλιση προς τα κάτω στη σελίδα, το κουμπί προς τα πάνω θα εμφανιστεί σταδιακά, όταν τοποθετήσετε τον κέρσορα πάνω του, θα αλλάξει την εμφάνισή του (εκτός από την περίπτωση που έχει φορτωθεί μια μεμονωμένη εικόνα) και αφού κάνετε κλικ σε αυτό, η ιστοσελίδα θα επιστρέψει στην επάνω θέση και η κύλιση θα είναι ομαλή. Εν κατακλείδι, λίγη μουσική νοσταλγία: