ทำ Scroll smooth และ focus anchor link

2,490฿คอร์สสอนสร้างเว็บไซต์ 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
}
Chai Phonbopit

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