Challenge - 5 Problems
Scroll Mastery in Next.js
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate2:00remaining
What happens when this Next.js component uses
useEffect to scroll?Consider this Next.js functional component that scrolls the window to the top when it mounts. What will the user see after the component loads?
NextJS
import { useEffect } from 'react'; export default function ScrollTop() { useEffect(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, []); return <div style={{ height: '200vh' }}>Scroll and reload to test</div>; }
Attempts:
2 left
💡 Hint
Think about what window.scrollTo with behavior 'smooth' does inside useEffect on mount.
✗ Incorrect
The useEffect runs once after the component mounts, triggering window.scrollTo with smooth behavior, so the page scrolls smoothly to the top.
📝 Syntax
intermediate2:00remaining
Which option correctly disables scroll restoration in Next.js client-side navigation?
Next.js uses the browser's scroll restoration by default. Which code snippet correctly disables it to control scroll manually?
NextJS
import { useEffect } from 'react'; import { useRouter } from 'next/router'; export default function DisableScrollRestoration() { const router = useRouter(); useEffect(() => { // Your code here }, [router]); return <div>Content</div>; }
Attempts:
2 left
💡 Hint
Check the correct property on window.history to control scroll restoration.
✗ Incorrect
The correct property is window.history.scrollRestoration. Setting it to 'manual' disables automatic scroll restoration.
🔧 Debug
advanced2:00remaining
Why does this Next.js scroll control code fail to scroll smoothly on route change?
This code tries to scroll smoothly to top on route change but the scroll is instant. What is the cause?
NextJS
import { useEffect } from 'react'; import { useRouter } from 'next/router'; export default function ScrollOnRouteChange() { const router = useRouter(); useEffect(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, [router.pathname]); return <div style={{ height: '200vh' }}>Page content</div>; }
Attempts:
2 left
💡 Hint
Next.js automatically restores scroll position on navigation unless disabled.
✗ Incorrect
Next.js automatically restores scroll position after navigation, which overrides the smooth scroll triggered in useEffect, causing an instant jump.
🧠 Conceptual
advanced2:00remaining
What is the best way to implement smooth scroll to a section on the same page in Next.js?
You want to smoothly scroll to a section with id 'features' when clicking a button. Which approach works best in Next.js?
Attempts:
2 left
💡 Hint
Native browser smooth scrolling with CSS is simple and reliable.
✗ Incorrect
Using anchor links with CSS scroll-behavior: smooth on the html element enables smooth scrolling natively without extra JavaScript.
❓ state_output
expert3:00remaining
What is the scroll position after this Next.js component runs?
This component disables automatic scroll restoration and manually scrolls to 100px from top on route change. What is the final scroll position after navigation?
NextJS
import { useEffect } from 'react'; import { useRouter } from 'next/router'; export default function ManualScroll() { const router = useRouter(); useEffect(() => { if ('scrollRestoration' in window.history) { window.history.scrollRestoration = 'manual'; } const handleRouteChange = () => { window.scrollTo({ top: 100, behavior: 'auto' }); }; router.events.on('routeChangeComplete', handleRouteChange); return () => { router.events.off('routeChangeComplete', handleRouteChange); }; }, [router.events]); return <div style={{ height: '300vh' }}>Long content</div>; }
Attempts:
2 left
💡 Hint
Check the scrollRestoration setting and the scrollTo behavior used.
✗ Incorrect
Scroll restoration is disabled, so Next.js won't reset scroll. The handler scrolls instantly (behavior: 'auto') to 100px after route change completes.