如何创建：平滑滚动

学习如何使用 CSS 创建平滑的滚动效果。

Pehmeä vieritys

Section 1
Klikkaa minua, pehmeä vieritys alas toiseen osaan.

Klikkaa linkkiä nähdäksesi 'pehmeän' vierityseffektin.

Huomioitavaa：Poista scroll-behavior-ominaisuus voidaksesi peruuttaa pehmeän vierityksen.

Pehmeä vieritys

Lisää <html>-elementtiin scroll-behavior: smooth Voit ottaa käyttöön pehmeän sivun vierityksen:

Huomioitavaa：Voit myös lisätä sen tiettyyn elementtiin/tiettyyn vierityskonttiin.

Esimerkki

html {
  scroll-behavior: smooth;
}

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee täysin vieritysbehaviour-ominaisuutta.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0

yksittäisille selaimille

ei-tuen scroll-behavior omistaville selaimille voit käyttää JavaScriptiä tai JavaScript-kirjastoa (kuten jQueryLuo ratkaisu, joka toimii kaikissa selaimissa：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Lisää pehmeä vieritys kaikkiin linkkeihin
  $("a").on('click', function(event) {
    // Varmista, että this.hash sisältää arvon ennen kuin korvataan oletusarvoinen toiminta
    if (this.hash !== "") {
      // Estä oletusarvoinen ankkuri-klikkaus toiminta
      event.preventDefault();
      // Tallenna haahkoarvo
      var hash = this.hash;
      // Lisää pehmeä sivun vieritys jQuery:n animate() metodin avulla
      // Valinnainen numero (800) määrittää aikavälin, jonka jälkeen vieritys suoritetaan
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Kun vieritys on valmis, lisää numero (hash) URL:iin (oletusarvoinen klikkaus toiminta)
        window.location.hash = hash;
      );
    } // Lopeta if
  );
);
</script>

Kokeile itse

Liittyvät sivut

Viittauskirja:CSS scroll-behavior ominaisuus