Not scroll to top after changing route
Problem
What version of Next.js are you using? 11.1.2 What version of Node.js are you using? v15.9.0 What browser are you using? Chrome What operating system are you using? macOS How are you deploying your application? next start Describe the Bug I have two pages, each one contains lazy render components. After changing route by clicking <Link scroll={true}>. The page doesn't scroll to top. This happens on Chrome IOS (work well on safari IOS) Expected Behavior It should scroll to top after changing page To Reproduce I have created a demo project here: https://github.com/TanDung2512/demo-bug-scroll-nextjs 1. Accessing website on Chrome by an Iphone. 2. Scroll till the page renders more sections. 3. Click any item to change page https://user-images.githubusercontent.com/36843017/132081810-87d47392-4756-4a76-9500-2dc093b78262.MP4 <sub>NEXT-1347</sub>
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: Not scroll to top after changing route
Ok i got this fix. Basically in custom css file, i have added below css for html tag. After removing this, when navigating to another page using router.push(url) then the scroll was at the top and the page rendered fine with no auto scrolling. `html { height: 100%; }`
Trust Score
6 verifications
- 1
Ok i got this fix.
Basically in custom css file, i have added below css for html tag. After removing this, when navigating to another page using router.push(url) then the scroll was at the top and the page rendered fine with no auto scrolling.
Validation
Resolved in vercel/next.js GitHub issue #28778. Community reactions: 22 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep