Scroll behavior control in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

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>;
}

A The page jumps instantly to the top without animation.

B The page smoothly scrolls to the top on load.

C Nothing happens; the page stays where it was.

D The page scrolls to the bottom smoothly.

💡 Hint

Think about what window.scrollTo with behavior 'smooth' does inside useEffect on mount.

The useEffect runs once after the component mounts, triggering window.scrollTo with smooth behavior, so the page scrolls smoothly to the top.

📝 Syntax

intermediate

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>;
}

A window.history.scrollRestoration = 'manual';

B window.scrollRestoration = 'manual';

C history.scrollRestoration = 'manual';

D window.history.scrollRestore = 'manual';

💡 Hint

Check the correct property on window.history to control scroll restoration.

The correct property is window.history.scrollRestoration. Setting it to 'manual' disables automatic scroll restoration.

🔧 Debug

advanced

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>;
}

A The component does not render enough content to scroll.

B window.scrollTo does not support smooth behavior in modern browsers.

C Next.js scroll restoration conflicts and resets scroll instantly after useEffect runs.

D The useEffect dependency is wrong; it should be router instead of router.pathname.

💡 Hint

Next.js automatically restores scroll position on navigation unless disabled.

Next.js automatically restores scroll position after navigation, which overrides the smooth scroll triggered in useEffect, causing an instant jump.

🧠 Conceptual

advanced

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?

A Use <a href="#features"> with CSS scroll-behavior: smooth on html element.

B Use router.push('/page#features') and rely on Next.js scroll restoration.

C Use window.scrollTo({ top: document.getElementById('features').offsetTop }) without behavior.

D Use window.location.hash = '#features' without smooth behavior.

💡 Hint

Native browser smooth scrolling with CSS is simple and reliable.

Using anchor links with CSS scroll-behavior: smooth on the html element enables smooth scrolling natively without extra JavaScript.

❓ state_output

expert

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>;
}

A The page stays at the previous scroll position after navigation.

B The page scrolls smoothly to 100 pixels from the top after navigation.

C The page scrolls instantly to the top (0 pixels) after navigation.

D The page scrolls instantly to 100 pixels from the top after navigation.

💡 Hint

Check the scrollRestoration setting and the scrollTo behavior used.

Scroll restoration is disabled, so Next.js won't reset scroll. The handler scrolls instantly (behavior: 'auto') to 100px after route change completes.