3427d324d8
When navigating to a route with a hash parameter, the layout router jumps to the element by scrolling to the node's `offsetTop` value. However, this will ignore `scroll-padding`, which deviates from browser behavior. It looks like this isn't an issue in the pages router which currently makes use of [`scrollIntoView`](https://github.com/vercel/next.js/blob/canary/packages/next/src/shared/lib/router/router.ts#L2262). Closes NEXT-1171 Fixes #49612 ---------
41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
import Link from 'next/link'
|
|
import './global.css'
|
|
|
|
export default function HashPage() {
|
|
// Create list of 5000 items that all have unique id
|
|
const items = Array.from({ length: 5000 }, (_, i) => ({ id: i }))
|
|
|
|
return (
|
|
<div style={{ fontFamily: 'sans-serif', fontSize: '16px' }}>
|
|
<p>Hash Page</p>
|
|
<Link href="/hash#hash-6" id="link-to-6">
|
|
To 6
|
|
</Link>
|
|
<Link href="/hash#hash-50" id="link-to-50">
|
|
To 50
|
|
</Link>
|
|
<Link href="/hash#hash-160" id="link-to-160">
|
|
To 160
|
|
</Link>
|
|
<Link href="/hash#hash-300" id="link-to-300">
|
|
To 300
|
|
</Link>
|
|
<Link href="#hash-500" id="link-to-500">
|
|
To 500 (hash only)
|
|
</Link>
|
|
<Link href="/hash#top" id="link-to-top">
|
|
To Top
|
|
</Link>
|
|
<Link href="/hash#non-existent" id="link-to-non-existent">
|
|
To non-existent
|
|
</Link>
|
|
<div>
|
|
{items.map((item) => (
|
|
<div key={item.id}>
|
|
<div id={`hash-${item.id}`}>{item.id}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|