Silliq aylantirish


CSS yordamida silliq aylantirish effektini yaratishni o‘rganing.


ULASHISH

Silliq aylantirish

Section 1

"Silliq" aylantirish effektini ko‘rish uchun havolani bosing.

Quyidagi 2-bo‘limga silliq o‘tish uchun meni bosing

Eslatma: Silliq aylantirishni o‘chirish uchun scroll-behavior xususiyatini olib tashlang.


Silliq aylantirish

Butun sahifa uchun silliq aylantirishni yoqish uchun <html> elementiga scroll-behavior: smooth qo‘shing (eslatma: uni muayyan elementga/aylantiriladigan konteynerga ham qo‘shish mumkin):

Misol

html {   scroll-behavior: smooth; }
O‘zingiz sinab ko‘ring »

Brauzerlarda qo‘llab-quvvatlash

Jadvaldagi sonlar scroll-behavior xususiyatini to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.

Xususiyat
scroll-behavior 61.0 79.0 36.0 14.0 48.0


Barcha brauzerlarda ishlaydigan yechim

scroll-behavior xususiyatini qo‘llab-quvvatlamaydigan brauzerlar uchun barcha brauzerlarda ishlaydigan yechim yaratishda JavaScript yoki jQuery kabi JavaScript kutubxonasidan foydalanishingiz mumkin:

Misol

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){   // Add smooth scrolling to all links   $("a").on('click', function(event) {     // Make sure this.hash has a value before overriding default behavior     if (this.hash !== "") {       // Prevent default anchor click behavior       event.preventDefault();       // Store hash       var hash = this.hash;       // Using jQuery's animate() method to add smooth page scroll       // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area       $('html, body').animate({         scrollTop: $(hash).offset().top       }, 800, function(){         // Add hash (#) to URL when done scrolling (default click behavior)         window.location.hash = hash;       });     } // End if   }); }); </script>
O‘zingiz sinab ko‘ring »

Maslahat: scroll-behavior xususiyati haqida CSS ma’lumotnomamizda batafsil o‘qing: CSS scroll-behavior xususiyati.


W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!