ทำ Scroll smooth และ focus anchor link

FREEคอร์สสอนสร้างเว็บไซต์ HTML/CSS สำหรับมือใหม่ + พร้อม Workshop


ให้ browser ไป focus ตำแหน่ง Anchor link เวลากดเข้ามา หรือ refresh url ยังไง?

ตัวอย่างเช่น link /path/to/url#step3 ให้ไป focus ที่ #step3 เลย

ใช้ window.onload และ window.scroll (ถ้าจะให้มัน scroll หรือใช้ auto )

window.onload = () => {
  const hash = window.location.hash
  const id = hash.substr(1)
  const element = document.getElementById(id)

  if (element) {
    window.scroll({
      behavior: 'smooth',
      left: 0,
      top: element.offsetTop
    })
  }
}

ส่วน CSS ปรับแค่

html {
  scroll-behavior: smooth;
}

Gatsby ใส่ไว้ในไฟล์ gatsby-browser.js

export const onClientEntry = () => {
  window.onload = fn
}

ติดตามข่าวสารใหม่ๆจาก Devahoy

กด Like เพจ Devahoy

สมัครรับข่าวสารผ่านทาง Email

Chai Phonbopit: Software Engineer แห่งหนึ่ง • ผู้ชายธรรมดาๆ ที่ชื่นชอบ Node.js, JavaScript, React และ Open Source มีงานอดิเรกเป็น Acoustic Guitar และ Football นอกจากเขียนบล็อคที่เว็บนี้แล้ว ก็มีเขียนบล็อกแนว Lifestyle สบายๆ ที่ indyROVER.com ครับ

แสดงความคิดเห็น