ทำ Scroll smooth และ focus anchor link

Chai Phonbopit

Software Engineer & Blogger

18 August 2019

In

ให้ 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
}
  • #TIL
  • #Gatsby
  • #html
  • #scroll smooth
  • #Window onload
  • #Gatsby browser