วิธีการสร้าง: การเลื่อนหน้าลาดนั่ง

เรียนรู้วิธีการใช้ CSS ทำให้การเลื่อนหน้าลาดนั่ง

การเลื่อนหน้าเงียบๆ

การเลื่อนหน้าเงียบๆ

เพิ่มสมบัติ scroll-behavior: smooth สามารถเปิดใช้การเลื่อนหน้าเงียบๆ ทั้งหน้าบ้าน

ข้อเน้นและยังสามารถเพิ่มมันไปยังองค์ประกอบเฉพาะหรือตัวแทนเลื่อนหน้า

ตัวอย่าง

html {
  scroll-behavior: smooth;
}

ทดลองด้วยตัวเอง

การสนับสนุนบราวเซอร์

ตัวเลขในตารางบอกว่าบราวเซอร์แรกที่สนับสนุนอัตราการเลื่อนหน้า

แนวทางแก้ไขเอกสาร

สำหรับบราวเซอร์ที่ไม่สนับสนุน scroll-behavior ของบราวเซอร์ที่ไม่สนับสนุน，คุณสามารถใช้ JavaScript หรือหน่วยหนึ่งของ JavaScript ลิบแรรี่ (เช่น 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 !== "") {
      // ป้องกันการทำงานเริ่มต้นเริ่มต้นโดยเริ่มต้น
      event.preventDefault();
      // จัดเก็บค่าฮาช
      var hash = this.hash;
      // ใช้วิธี animate() ของ jQuery เพื่อเพิ่มการเลื่อนหน้าเงียบๆ ในหน้า
      // ตัวเลขเลือก (800) กำหนดมิลลิเซกันด์ที่จะต้องการเพื่อเลื่อนไปยังพื้นที่ที่กำหนด
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // ใส่井ภาค (#) ใน URL หลังจากเสร็จการเลื่อนหน้า (การกดเริ่มต้นเริ่มต้น)
        window.location.hash = hash;
      );
    } // End if
  );
);
</script>

ทดลองด้วยตัวเอง

相关页面

参考手册：CSS scroll-behavior 属性