home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

วิธีเลื่อนไปที่ด้านล่างของหน้าอย่างราบรื่นด้วย JavaScript &CSS

เรียนรู้วิธีเลื่อนผู้ใช้ไปที่ด้านล่างของหน้าเว็บขนาดยาวอย่างราบรื่นด้วย JavaScript และ CSS เล็กน้อย

หากคุณต้องการให้ผู้ใช้สามารถเลื่อนไปที่ด้านล่างของหน้าได้อย่างราบรื่น คุณสามารถใช้คุณสมบัติ CSS ที่เรียกว่า scroll-behavior และวิธีการ JavaScript ที่เรียกว่า scrollIntoView() .

คุณจะต้องมีสิ่งต่อไปนี้:

  • หน้าเว็บขนาดยาวที่มีเนื้อหาเพียงพอที่จะเปิดใช้งานแถบเลื่อนแกน y ทางด้านขวาของเบราว์เซอร์ของคุณ
  • องค์ประกอบจุดยึดที่ด้านบนของหน้าที่มี id
  • องค์ประกอบใดๆ ที่มี id ที่ด้านล่างของหน้า
  • scroll-behavior คุณสมบัติ CSS
  • scrollIntoView() คุณสมบัติ JavaScript

มาเรียนรู้จากตัวอย่างกันเถอะ!

ตัวอย่างการจัดวาง HTML

คุณสามารถใช้ตัวอย่างมาร์กอัป HTML ต่อไปนี้เพื่อเรียนรู้ (อย่าลังเลที่จะแทนที่ <p>....</p> dummy elements ด้วยเนื้อหาจริง):

<main>
  <p><a id="scroll-to-bottom">Scroll to bottom</a></p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p id="page-bottom">You have reached the bottom of this page!!</p>
</main>

สังเกตว่าเรามีองค์ประกอบสมอหนึ่งตัว <a> ที่ด้านบนด้วยรหัส scroll-to-bottom และหนึ่งองค์ประกอบที่ด้านล่างซึ่งมีรหัส page-bottom .

CSS

หากต้องการเปิดใช้งานการเลื่อนอย่างราบรื่น ให้เพิ่มสิ่งต่อไปนี้ในสไตล์ชีต CSS ของคุณ:

html {
  scroll-behavior: smooth;
}

/* Layout */
main {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 1rem;
}

#scroll-to-bottom {
  font-weight: bold;
  color: green;
}

หมายเหตุ:เวทมนตร์การเลื่อนมาจาก scroll-behavior: smooth; ส่วนที่เหลือของการจัดรูปแบบ CSS ด้านบนเป็นเพียงรูปลักษณ์ที่สวยงามเท่านั้น

JavaScript

ในการเลื่อนผู้ใช้จากบนลงล่างอย่างราบรื่นเมื่อผู้ใช้คลิกที่ เลื่อนไปด้านล่าง เพิ่มโค้ด JavaScript ต่อไปนี้:

let scrollToBottom = document.querySelector("#scroll-to-bottom")
let pageBottom = document.querySelector("#page-bottom")

scrollToBottom.addEventListener("click", function() {
  pageBottom.scrollIntoView()
})

วิธีการทำงานของโค้ด JavaScript

  • ขั้นแรก เราประกาศตัวแปรสองตัวเพื่ออ้างอิง scroll-to-bottom และ page-bottom ตามลำดับ
  • จากนั้นเราแนบฟังเหตุการณ์กับ scrollToBottom และขอให้ฟังเฉพาะ เหตุการณ์การคลิก
  • ภายใน function() { .. } เราแนบ scrollIntoView() วิธีการไปยังองค์ประกอบด้านล่างของหน้า pageBottom .

ตอนนี้เมื่อใดก็ตามที่มีคนคลิกที่เลื่อนไปที่ด้านล่าง ฟังก์ชั่นดำเนินการ scrollIntoView เมธอดและเลื่อนผู้ใช้ไปที่ด้านล่างโดยที่ page-bottom id อยู่

หมายเหตุ:หากคุณลบ scroll-behavior: smooth; ม้วนหนังสือจะยังคงเกิดขึ้นในทางเทคนิค แต่จะเป็นแบบกะทันหัน

คุณยังสามารถเลื่อนได้อย่างราบรื่นด้วย JavaScript วานิลลาแท้ (ไม่มีคุณสมบัติ CSS) แต่ต้องใช้โค้ดมากกว่าที่คุณเห็นในตัวอย่างนี้

ตรวจสอบรหัสสาธิตทั้งหมด

การเลื่อนไปที่ด้านล่างมีประโยชน์ในชีวิตจริงอย่างไร

กรณีใช้งานหนึ่งที่นึกถึงคือการให้ผู้เข้าชมเลื่อนดูสรุปเนื้อหาที่ยาวขึ้นอย่างรวดเร็วซึ่งพวกเขาอาจไม่มีเวลาอ่านในขณะนี้

ความเข้ากันได้ของเบราว์เซอร์

scroll-behavior คุณสมบัติ CSS เข้ากันไม่ได้กับ Internet Explorer หรือ Safari สำหรับเบราว์เซอร์เหล่านั้น คุณจะต้องมีโซลูชัน JavaScript แท้