Γεια! Πριν πάτε πολύ μακριά από την τρύπα του κουνελιού της ομαλής κύλισης που βασίζεται σε JavaScript, γνωρίζουμε ότι υπάρχει ένα εγγενές χαρακτηριστικό CSS για αυτό: scroll-behavior.
html ( scroll-behavior: smooth; )Και πριν φτάσετε σε μια βιβλιοθήκη όπως το jQuery για βοήθεια, υπάρχει επίσης μια εγγενής έκδοση JavaScript ομαλής κύλισης, όπως αυτή:
// Scroll to specific values // scrollTo is the same window.scroll(( top: 2500, left: 0, behavior: 'smooth' )); // Scroll certain amounts from current position window.scrollBy(( top: 100, // could be negative value left: 0, behavior: 'smooth' )); // Scroll to a certain element document.querySelector('.hello').scrollIntoView(( behavior: 'smooth' ));Ο Dustan Kasten έχει ένα polyfill για αυτό. Και μάλλον θα μπορούσατε να φτάσετε μόνο σε αυτό εάν κάνατε κάτι με κύλιση της σελίδας που δεν μπορούσε να γίνει με #target jump links και CSS.
Προσβασιμότητα της ομαλής κύλισης
Όποια τεχνολογία κι αν χρησιμοποιείτε για ομαλή κύλιση, η προσβασιμότητα αποτελεί πρόβλημα Για παράδειγμα, εάν κάνετε κλικ σε έναν #hashσύνδεσμο, η εγγενής συμπεριφορά είναι το πρόγραμμα περιήγησης να αλλάξει την εστίαση στο στοιχείο που ταιριάζει με αυτό το αναγνωριστικό. Η σελίδα μπορεί να μετακινηθεί, αλλά η κύλιση είναι μια παρενέργεια της αλλαγής της εστίασης.
Εάν παρακάμψετε την προεπιλεγμένη συμπεριφορά αλλαγής εστίασης (την οποία πρέπει να κάνετε, για να αποτρέψετε την άμεση κύλιση και να ενεργοποιήσετε την ομαλή κύλιση), πρέπει να χειριστείτε μόνοι σας την αλλαγή εστίασης .
Η Heather Migliorisi έγραψε για αυτό, με λύσεις κώδικα, στο Smooth Scrolling and Accessibility.
Ομαλή κύλιση με το jQuery
Το jQuery μπορεί επίσης να το κάνει αυτό. Εδώ είναι ο κώδικας για να πραγματοποιήσετε μια ομαλή κύλιση σελίδας σε μια άγκυρα στην ίδια σελίδα. Έχει κάποια λογική ενσωματωμένη για να προσδιορίσει αυτούς τους συνδέσμους άλματος και όχι να στοχεύει άλλους συνδέσμους.
// Select all links with hashes $('a(href*="#")') // Remove links that don't actually link to anything .not('(href="#")') .not('(href="#0")') .click(function(event) ( // On-page links if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) ( // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('(name=' + this.hash.slice(1) + ')'); // Does a scroll target exist? if (target.length) ( // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate(( scrollTop: target.offset().top ), 1000, function() ( // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) ( // Checking if the target was focused return false; ) else ( $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again ); )); ) ) ));Δείτε το Scrolling Pen Smooth Page στο jQuery του Chris Coyier (@chriscoyier) στο CodePen.
Αν έχετε χρησιμοποιήσει αυτόν τον κωδικό και σας αρέσει όλοι ΓΙΑΤΙ ΤΙ ΕΙΝΑΙ ΜΕ ΤΙΣ ΜΠΛΕ ΠΕΡΙΓΡΑΦΕΣ;