Jak tworzyć: płynne przewijanie

Uczenie się, jak używać CSS do tworzenia płynnych efektów przewijania.

Kliknij mnie, płynne przewijanie do górnej części 1.

Section 1
点击我，平滑滚动至下方第 2 部分。

Kliknij mnie, płynne przewijanie do dolnej części 2.

Można włączyć płynne przewijanie na całej stronie:Kliknij link, aby zobaczyć efekt "płynnego" przewijania.

Usunięcie atrybutu scroll-behavior można anulować płynne przewijanie.
Section 2

Kliknij mnie, płynne przewijanie do górnej części 1.

Płynne przewijanie Dodaj do elementu <html> scroll-behavior: smooth

Można włączyć płynne przewijanie na całej stronie:Uwaga:

Można również dodać je do konkretnego elementu/contenera przewijania.

Przykład
  html {
scroll-behavior: smooth;

Spróbuj sam

}

Wsparcie przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która obsługuje atrybut przewijania. Chrome Edge Firefox Safari
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która obsługuje atrybut przewijania. Chrome Edge Firefox Safari
Opera 61.0 79.0 36.0 14.0

48.0

Rozwiązania wielo-przeglądarkowego scroll-behavior Dla przeglądarek, które nie obsługują jQueryOto jak można stworzyć rozwiązanie wielo-przeglądarkowe:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Dodaj płynne przewijanie do wszystkich linków
  $("a").on('click', function(event) {
    // Upewnij się, że this.hash ma wartość przed nadpisaniem domyślnego zachowania
    if (this.hash !== "") {
      // Zapobiegaj domyślnemu zachowaniu kliknięcia akordu
      event.preventDefault();
      // Przechowaj wartość hash
      var hash = this.hash;
      // Użyj metody animate() jQuery do dodania płynnego przewijania strony
      // Opcjonalna liczba (800) określa milisekundy potrzebne do przewinięcia do określonej strefy
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Po zakończeniu przewijania, dodaj znak (#) do URL (domyślny zachowanie kliknięcia)
        window.location.hash = hash;
      });
    } // Koniec if
  });
});
</script>

Spróbuj sam

Strony związane

Podręcznik:Atrybut scroll-behavior CSS