如何创建：平滑滚动
学习如何使用 CSS 创建平滑的滚动效果。
Scrolling Lancar
Section 1
Klik saya, scrolling lancar ke bahagian bawah kedua.Klik pautan untuk lihat kesan scrolling lancar.
Perhatian:Buang sifat scroll-behavior untuk menghapuskan scrolling lancar.
Scrolling Lancar
tambahkan kepada elemen <html> scroll-behavior: smooth boleh membolehkan scrolling lancar bagi halaman penuh:
Perhatian:boleh ditambahkan ke elemen tertentu/penampung scrolling.
Contoh
html {
scroll-behavior: smooth;
}
Pendukung pelayar
Nombor di dalam jadwal menunjukkan versi pelayar yang mendukung sifat scrolling dengan lancar pertama kalinya.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 61.0 | 79.0 | 36.0 | 14.0 | 48.0 |
penyelesaian lepas pelayar
untuk pelayar yang tidak mendukung scroll-behavior pelayar yang mempunyai sifat, anda boleh gunakan JavaScript atau pustaka JavaScript (seperti jQuery）untuk mencipta penyelesaian yang sesuai untuk semua pelayar:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
// Tambahkan scrolling lancar untuk semua pautan
$("a").on('click', function(event) {
// Pastikan this.hash mempunyai nilai sebelum melengkapkan tindakan lalai
if (this.hash !== "") {
// Halangan tindakan klik lalai pautan
event.preventDefault();
// Simpan nilai hash
var hash = this.hash;
// Gunakan kaedah animate() jQuery untuk menambahkan scrolling halaman yang lancar
// Nombor pilihan (800) untuk menyatakan masa milisecond yang diperlukan untuk scroll ke kawasan yang ditentukan
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Selepas melengkapkan gerakan scrolling, tambahkan nombor pautan (#) ke URL (tindakan klik lalai)
window.location.hash = hash;
);
} // Akhir if
);
);
</script>
