Κάντε τους συνδέσμους της ίδιας σελίδας ελαφρώς ωραιότερους στη χρήση με αυτό το εφέ φυσικής ομαλής κύλισης.
Η ομαλή κύλιση είναι μια τεχνική που χρησιμοποιείται στην ανάπτυξη ιστού για τη δημιουργία μιας ρευστής εμπειρίας κύλισης για τους χρήστες. Βελτιώνει την πλοήγηση μέσα σε μια ιστοσελίδα, ενεργοποιώντας την κίνηση κύλισης αντί για το προεπιλεγμένο απότομο άλμα.
Αυτός ο περιεκτικός οδηγός για προγραμματιστές ιστού θα σας βοηθήσει να εφαρμόσετε ομαλή κύλιση χρησιμοποιώντας JavaScript.
Η ομαλή κύλιση είναι όταν μια ιστοσελίδα μετακινείται ομαλά στην επιθυμητή ενότητα, αντί να μεταπηδά εκεί αμέσως. Αυτό κάνει την εμπειρία κύλισης πιο ευχάριστη και απρόσκοπτη για τον χρήστη.
Η ομαλή κύλιση μπορεί να βελτιώσει την εμπειρία χρήστη μιας ιστοσελίδας με διάφορους τρόπους:
- Ενισχύει την οπτική γοητεία εξαλείφοντας τα απότομα και ενοχλητικά άλματα κύλισης, προσθέτοντας μια πινελιά κομψότητας.
- Ενθαρρύνει την αφοσίωση των χρηστών παρέχοντας μια ρευστή και απρόσκοπτη εμπειρία κύλισης. Αυτό, με τη σειρά του, παρακινεί τους χρήστες να εξερευνήσουν περαιτέρω το περιεχόμενο.
- Τέλος, η ομαλή κύλιση διευκολύνει την πλοήγηση για τους χρήστες, ιδιαίτερα όταν ασχολούνται με μεγάλες ιστοσελίδες ή μετακινούνται μεταξύ διαφορετικών ενοτήτων.
Για να εφαρμόσετε ομαλή κύλιση, μπορείτε να τροποποιήσετε την προεπιλεγμένη συμπεριφορά κύλισης χρησιμοποιώντας JavaScript.
Δομή HTML
Αρχικά, δημιουργήστε τα απαραίτητα στοιχεία σήμανσης για τις διαφορετικές θύρες προβολής και την πλοήγηση για κύλιση μεταξύ τους.
html>
<htmllang="en"><head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="./style.css" />
<title>Smooth Scrolling Guide for Web Developerstitle>
head><body>
<nav>
<ul>
<li><ahref="#section1">Section 1a>li>
<li><ahref="#section2">Section 2a>li>
<li><ahref="#section3">Section 3a>li>
ul>
nav><sectionid="section1">
<h2>Section 1h2>
section><sectionid="section2">
<h2>Section 2h2>
section><sectionid="section3">
<h2>Section 3h2>
section><scriptsrc="./script.js">script>
body>
html>
Αυτό το HTML αποτελείται από μια γραμμή πλοήγησης που περιέχει τρεις ετικέτες αγκύρωσης. Το χαρακτηριστικό href κάθε αγκύρωσης καθορίζει το μοναδικό αναγνωριστικό της ενότητας στόχου (π.χ. ενότητα 1, ενότητα 2, ενότητα 3). Αυτό διασφαλίζει ότι κάθε σύνδεσμος στον οποίο κάνετε κλικ πλοηγείται στο αντίστοιχο στοιχείο στόχο.
Στυλ CSS
Στη συνέχεια, εφαρμόστε λίγο CSS για να κάνετε τη σελίδα εμφανώς ελκυστική και οργανωμένη. Προσθέστε τα ακόλουθα στο στυλ.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: "SegoeUI", Tahoma, Geneva, Verdana, sans-serif;
}nav {
background: #fff;
box-shadow: 3px 3px 5pxrgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}navul {
display: flex;
gap: 10px;
justify-content: center;
}navulli {
list-style: none;
}navullia {
border-radius: 5px;
border: 1.5pxsolid#909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Αυτό θα αποδώσει τους συνδέσμους ως μια σειρά κουμπιών και κάθε τμήμα ως στοιχείο πλήρους ύψους. Παρατηρήστε όμως πώς κάνοντας κλικ σε έναν σύνδεσμο το πρόγραμμα περιήγησης μεταβαίνει αμέσως στην αντίστοιχη ενότητα, χωρίς κινούμενα σχέδια.
Υλοποίηση JavaScript
Κατά τα άλλα, για να προσθέσετε μια ομαλή κίνηση όταν κάνετε κλικ σε μια ετικέτα αγκύρωσης, χρησιμοποιήστε τη μέθοδο scrollIntoView(). Η μέθοδος scrollIntoView() είναι α ενσωματωμένη μέθοδο JavaScript της κλάσης Element που σας επιτρέπει να κάνετε κύλιση ενός στοιχείου στην ορατή περιοχή του παραθύρου του προγράμματος περιήγησης.
Όταν καλείτε αυτήν τη μέθοδο, το πρόγραμμα περιήγησης προσαρμόζει τη θέση κύλισης του κοντέινερ του στοιχείου (όπως το παράθυρο ή ένα κοντέινερ με δυνατότητα κύλισης) για να κάνει το στοιχείο ορατό.
Προσθέστε τον κώδικα JavaScript στο script.js αρχείο. Ξεκινήστε ακούγοντας την ενεργοποίηση του συμβάντος DOMContentLoaded πριν κάνετε οτιδήποτε άλλο. Αυτό διασφαλίζει ότι η επανάκληση εκτελείται μόνο όταν το DOM φορτωθεί πλήρως και είναι έτοιμος να χειραγωγήσει.
document.addEventListener("DOMContentLoaded", makeLinksSmooth);Στη συνέχεια, ορίστε το makeLinksSmooth() λειτουργία. Ξεκινήστε επιλέγοντας τις ετικέτες αγκύρωσης στην πλοήγηση, καθώς θα θέλετε να τροποποιήσετε τη συμπεριφορά τους. Στη συνέχεια, επαναλάβετε κάθε σύνδεσμο και προσθέστε ένα πρόγραμμα ακρόασης συμβάντων για το συμβάν κλικ του.
functionmakeLinksSmooth() {
const navLinks = document.querySelectorAll("nav a");
navLinks.forEach((link) => {
link.addEventListener("click", smoothScroll);
});
}
Τέλος, ορίστε το smoothScroll() συνάρτηση που παίρνει ένα αντικείμενο ακρόασης συμβάντων. Καλέστε την preventDefault() για να βεβαιωθείτε ότι το πρόγραμμα περιήγησης δεν εκτελεί την προεπιλεγμένη του ενέργεια όταν κάνετε κλικ στον σύνδεσμο. Ο κωδικός που ακολουθεί θα τον αντικαταστήσει.
Πιάστε την τιμή href της τρέχουσας ετικέτας αγκύρωσης και αποθηκεύστε την σε μια μεταβλητή. Αυτή η τιμή πρέπει να είναι το αναγνωριστικό της ενότητας προορισμού, με το πρόθεμα "#", επομένως χρησιμοποιήστε την για να επιλέξετε το στοιχείο της ενότητας μέσω querySelector(). Εάν υπάρχει το targertElement, εκτελέστε το scrollIntoView μέθοδο και περάστε την "ομαλή" συμπεριφορά σε μια παράμετρο αντικειμένου για να ολοκληρώσετε το εφέ.
functionsmoothScroll(e) {
e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: "smooth", });
}
}
Με αυτό, η ολοκληρωμένη ιστοσελίδα σας θα μετακινηθεί ομαλά σε κάθε ενότητα όταν κάνετε κλικ σε έναν σύνδεσμο:
Για να βελτιώσετε περαιτέρω την εμπειρία ομαλής κύλισης, μπορείτε να ρυθμίσετε με ακρίβεια ορισμένες πτυχές.
Μπορείτε να προσαρμόσετε την κατακόρυφη θέση της κύλισης χρησιμοποιώντας το ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ιδιότητα του ορίσματος ρυθμίσεων. Χρησιμοποιήστε τιμές όπως "έναρξη", "κέντρο" ή "τέλος" για να προσδιορίσετε το τμήμα του στοιχείου προορισμού προς κύλιση:
targetElement.scrollIntoView({ behavior: "smooth", block: "end" });
Προσθήκη εφέ χαλάρωσης
Εφαρμόστε χαλαρωτικά εφέ στο κινούμενο σχέδιο κύλισης για να δημιουργήσετε μια πιο φυσική και οπτικά ελκυστική μετάβαση. Λειτουργίες διευκόλυνσης όπως ease-in, ease-out ή custom καμπύλες κυβικού-μπεζιέ μπορεί να ελέγξει την επιτάχυνση και την επιβράδυνση της κίνησης κύλισης. Μπορείτε να χρησιμοποιήσετε μια προσαρμοσμένη συνάρτηση χρονισμού με την ιδιότητα CSS συμπεριφοράς κύλισης ή μια βιβλιοθήκη JavaScript όπως "smooth-scroll" για να επιτύχετε το ίδιο αποτέλεσμα.
/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}
Βεβαιωθείτε ότι η εφαρμογή ομαλής κύλισης λειτουργεί με συνέπεια σε διαφορετικά προγράμματα περιήγησης. Δοκιμάστε και χειριστείτε τυχόν ιδιορρυθμίες ή ασυνέπειες που μπορεί να προκύψουν ειδικά για το πρόγραμμα περιήγησης.
Μπορείτε να χρησιμοποιήσετε έναν ιστότοπο όπως Μπορώ να χρησιμοποιήσω για να δοκιμάσετε την υποστήριξη του προγράμματος περιήγησης κατά τη δημιουργία. Εξετάστε το ενδεχόμενο να χρησιμοποιήσετε μια βιβλιοθήκη JavaScript ή μια πολυπλήρωση για να διασφαλίσετε τη συμβατότητα μεταξύ προγραμμάτων περιήγησης και να παρέχετε μια απρόσκοπτη εμπειρία για όλους τους χρήστες.
Η ομαλή κύλιση προσθέτει μια πινελιά κομψότητας και βελτιώνει την εμπειρία του χρήστη δημιουργώντας ένα ρευστό και οπτικά ευχάριστο εφέ κύλισης. Ακολουθώντας τα βήματα που περιγράφονται σε αυτόν τον οδηγό, οι προγραμματιστές ιστού μπορούν να εφαρμόσουν ομαλή κύλιση χρησιμοποιώντας JavaScript.
Η ακριβής ρύθμιση της συμπεριφοράς κύλισης, η προσθήκη εφέ διευκόλυνσης και η διασφάλιση της συμβατότητας μεταξύ προγραμμάτων περιήγησης θα βελτιώστε περαιτέρω την εμπειρία ομαλής κύλισης, κάνοντας τις ιστοσελίδες σας πιο ελκυστικές και ευχάριστες διαπλέω.