Πώς να δημιουργήσετε: ομαλή κύλιση

Εκμάθηση της χρήσης του CSS για τη δημιουργία ομαλής κύλισης.

Ομαλή κύληση

Ομαλή κύληση

Προσθέστε στο scroll-behavior: smooth Μπορείτε να ενεργοποιήσετε την ομαλή κύληση σε ολόκληρη τη σελίδα:

Σημείωση:Μπορείτε επίσης να το προσθέσετε σε συγκεκριμένα στοιχεία/πακέτα κύλησης.

Παράδειγμα

html {
  scroll-behavior: smooth;
}

Προσωπικά δοκιμάστε

Υποστήριξη του browser

Τα αριθμήματα στην τаблицή δείχνουν την πρώτη έκδοση του browser που υποστηρίζει την ιδιότητα της κύλησης.

Πρωτότυπος browser, μπορείτε να χρησιμοποιήσετε JavaScript ή βιβλιοθήκες JavaScript (όπως

Λύσεις μεταβλητών περιηγητών scroll-behavior Για περιηγητές που δεν υποστηρίζουν jQueryΔημιουργήστε λύσεις που υποστηρίζουν όλους τους περιηγητές:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Προσθέστε ομαλή κύληση για όλους τους σύνδεσμους
  $("a").on('click', function(event) {
    // Βεβαιωθείτε ότι this.hash έχει τιμή πριν από την επέμβαση στην προεπιλεγμένη συμπεριφορά
    if (this.hash !== "") {
      // Αποτρέψτε την προεπιλεγμένη συμπεριφορά του κλικ στο anchor
      event.preventDefault();
      // Αποθηκεύστε τη τιμή του hash
      var hash = this.hash;
      // Χρησιμοποιήστε τη μέθοδο animate() του jQuery για να προσθέσετε ομαλή κύληση της σελίδας
      // Προαιρετικός αριθμός (800) που καθορίζει το χρονικό διάστημα σε milliseconds που απαιτείται για την κύληση στην καθορισμένη περιοχή
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Μετά την ολοκλήρωση της κύλησης, προσθέστε το hash στο URL (προεπιλεγμένη συμπεριφορά κλικ)
        window.location.hash = hash;
      );
    } // Τέλος του if
  );
);
</script>

Προσωπικά δοκιμάστε

Σχετικές σελίδες

Παραδείγματα:Πρότυπο scroll-behavior CSS