archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs(link): add good to know comment about scroll behavior (#63152)

Browse source 
## Why?

We need to clarify that we are scrolling to the top of `{children}` when
it is not shown in the current viewport.

Closes NEXT-2780

---------

Co-authored-by: Zack Tanner <zacktanner@gmail.com>
This commit is contained in:
Sam Ko 2024-03-11 13:37:09 -07:00 committed by GitHub
parent cc57fe850d
commit 68206c986d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
View file

@ -130,7 +130,7 @@ export function Links() {
#### Scrolling to an `id`
The default behavior of the Next.js App Router is to scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation.
The default behavior of the Next.js App Router is to **scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation.**
If you'd like to scroll to a specific `id` on navigation, you can append your URL with a `#` hash link or just pass a hash link to the `href` prop. This is possible since `<Link>` renders to an `<a>` element.
@ -141,9 +141,13 @@ If you'd like to scroll to a specific `id` on navigation, you can append your UR
<a href="/dashboard#settings">Settings</a>
```
> **Good to know**:
>
> - Next.js will scroll to the [Page](/docs/app/building-your-application/routing/pages-and-layouts#pages) if it is not visible in the viewport upon navigation.
#### Disabling scroll restoration
The default behavior of the Next.js App Router is to scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation. If you'd like to disable this behavior, you can pass `scroll={false}` to the `<Link>` component, or `scroll: false` to `router.push()` or `router.replace()`.
The default behavior of the Next.js App Router is to **scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation.** If you'd like to disable this behavior, you can pass `scroll={false}` to the `<Link>` component, or `scroll: false` to `router.push()` or `router.replace()`.
```jsx
// next/link

6
docs/02-app/02-api-reference/01-components/link.mdx
View file

@ -153,7 +153,7 @@ export default function Page() {
### `scroll`
**Defaults to `true`.** The default behavior of `<Link>` is to scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation. When `false`, `next/link` will _not_ scroll to the top of the page after a navigation.
**Defaults to `true`.** The default behavior of `<Link>` **is to scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation.** When `false`, `next/link` will _not_ scroll to the top of the page after a navigation.
```tsx filename="app/page.tsx" switcher
import Link from 'next/link'
@ -179,6 +179,10 @@ export default function Page() {
}
```
> **Good to know**:
>
> - Next.js will scroll to the [Page](/docs/app/building-your-application/routing/pages-and-layouts#pages) if it is not visible in the viewport upon navigation.
### `prefetch`
<AppOnly>