Scroll behavior control in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable smooth scrolling when clicking the link.

NextJS

export default function Home() {
  return (
    <a href="#section" style={{ scrollBehavior: '[1]' }}>Go to Section</a>
  )
}

Drag options to blanks, or click blank then click option'

Aauto

Bsmooth

Cinstant

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' which causes instant jump without animation.

Using invalid values like 'instant' or 'none'.

The scrollBehavior CSS property controls the scrolling animation. Using "smooth" makes the scroll transition smooth.

2fill in blank

medium

Complete the code to scroll to the top smoothly when the button is clicked.

NextJS

import { useRouter } from 'next/router';

export default function ScrollTop() {
  const router = useRouter();

  function handleClick() {
    window.scrollTo({ top: 0, behavior: '[1]' });
  }

  return <button onClick={handleClick}>Scroll to Top</button>;
}

Drag options to blanks, or click blank then click option'

Aauto

Bnone

Cinstant

Dsmooth

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' which causes an immediate jump.

Using invalid strings that cause errors.

The behavior option in window.scrollTo controls the scroll animation. Setting it to "smooth" scrolls smoothly to the top.

3fill in blank

hard

Fix the error in the code to prevent the page from jumping instantly when navigating.

NextJS

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function Page() {
  const router = useRouter();

  useEffect(() => {
    router.events.on('routeChangeComplete', () => {
      window.scrollTo({ top: 0, behavior: '[1]' });
    });
  }, [router.events]);

  return <div>Content</div>;
}

Drag options to blanks, or click blank then click option'

Aauto

Binstant

Csmooth

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' which causes instant jump.

Not specifying behavior causing default jump.

Using behavior: 'smooth' in window.scrollTo ensures the page scrolls smoothly after route changes instead of jumping instantly.

4fill in blank

hard

Fill both blanks to create a scrollable container with smooth scroll behavior and vertical scrolling.

NextJS

<div style={{ overflowY: '[1]', scrollBehavior: '[2]', height: '200px' }}>
  <p>Lots of content here...</p>
</div>

Drag options to blanks, or click blank then click option'

Aauto

Bhidden

Cscroll

Dsmooth

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hidden' disables scrolling.

Using 'auto' may not always show scrollbar.

Using 'auto' or 'hidden' for scrollBehavior causes no smooth scroll.

overflowY: 'scroll' enables vertical scrolling. scrollBehavior: 'smooth' makes scrolling smooth inside the container.

5fill in blank

hard

Fill all three blanks to create a Next.js link that scrolls smoothly to the target section with offset top 100.

NextJS

import Link from 'next/link';

export default function Nav() {
  function handleClick(e) {
    e.preventDefault();
    const target = document.getElementById('[1]');
    if (target) {
      window.scrollTo({ top: target.offsetTop [2] 100, behavior: '[3]' });
    }
  }

  return <Link href="#[1]" onClick={handleClick}>Go to Section</Link>;
}

Drag options to blanks, or click blank then click option'

Asection

B-

Csmooth

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+' instead of '-' for offset causes wrong scroll position.

Using 'auto' instead of 'smooth' causes instant jump.

Mismatching id in href and getElementById.

The id to scroll to is 'section'. The offset is subtracted by 100 pixels using -. The scroll behavior is set to 'smooth' for smooth animation.

Practice

1. What does setting behavior: 'smooth' in window.scrollTo do in a Next.js app?

easy

A. It reloads the page after scrolling.

B. It makes the page scroll smoothly instead of jumping instantly.

C. It scrolls the page to the top instantly.

D. It disables scrolling on the page.

Solution

1. Step 1: Understand the scroll behavior option

   The behavior property controls how scrolling happens. Setting it to 'smooth' means the scroll moves gradually.

2. Step 2: Apply to Next.js scrolling

   Using window.scrollTo({ behavior: 'smooth' }) in Next.js makes the page scroll smoothly instead of jumping instantly.

3. Final Answer:

   It makes the page scroll smoothly instead of jumping instantly. -> Option B

4. Quick Check:

   behavior: 'smooth' = smooth scrolling [OK]

Hint: Remember 'smooth' means gradual scroll, not instant jump [OK]

Common Mistakes:

• Thinking 'smooth' disables scrolling
• Confusing 'smooth' with instant scroll
• Assuming it reloads the page

2. Which of the following is the correct syntax to scroll smoothly to the top of the page in Next.js?

easy

A. window.scrollTo({ smooth: 'top' });

B. window.scrollTo(0, 0, 'smooth');

C. window.scrollTo({ top: 0, smooth: true });

D. window.scrollTo({ top: 0, behavior: 'smooth' });

Solution

1. Step 1: Review window.scrollTo syntax

   The correct syntax uses an object with top and behavior keys: { top: 0, behavior: 'smooth' }.

2. Step 2: Identify correct option

   window.scrollTo({ top: 0, behavior: 'smooth' }); matches the correct syntax. Others misuse parameters or keys.

3. Final Answer:

   window.scrollTo({ top: 0, behavior: 'smooth' }); -> Option D

4. Quick Check:

   Correct scrollTo syntax = window.scrollTo({ top: 0, behavior: 'smooth' }); [OK]

Hint: Use object with top and behavior keys for smooth scroll [OK]

Common Mistakes:

• Passing parameters as separate arguments instead of object
• Using incorrect keys like 'smooth' instead of 'behavior'
• Misplacing the 'smooth' value

3. Consider this Next.js code snippet inside a component:
<pre>useEffect(() => { router.events.on('routeChangeComplete', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); }, []);
What will happen when the route changes?

medium

A. The page will smoothly scroll to the top after navigation.

B. Nothing will happen because the event listener is not removed.

C. The page will jump instantly to the top.

D. The page will reload after scrolling.

Solution

1. Step 1: Understand event listener on routeChangeComplete

   The code listens for the route change completion event and triggers scrolling.

2. Step 2: Analyze scrollTo call

   It calls window.scrollTo with behavior: 'smooth', so scrolling is smooth to top.

3. Final Answer:

   The page will smoothly scroll to the top after navigation. -> Option A

4. Quick Check:

   routeChangeComplete + smooth scroll = smooth scroll top [OK]

Hint: routeChangeComplete triggers smooth scroll to top [OK]

Common Mistakes:

• Assuming instant jump instead of smooth scroll
• Thinking event listener removal is required to trigger scroll
• Confusing scroll with page reload

4. This Next.js code tries to scroll smoothly on route change:
<pre>useEffect(() => { router.events.on('routeChangeComplete', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); }, []);
But after navigating multiple times, scrolling stops working. What is the likely problem?

medium

A. The event listener is added multiple times without cleanup, causing issues.

B. The scrollTo syntax is incorrect and causes errors.

C. Next.js does not support scroll control on route changes.

D. The behavior 'smooth' is not supported in modern browsers.

Solution

1. Step 1: Identify event listener management

   The code adds an event listener on mount but never removes it, so multiple listeners accumulate.

2. Step 2: Understand effect of multiple listeners

   Multiple listeners cause unexpected behavior or conflicts, stopping scroll from working properly.

3. Final Answer:

   The event listener is added multiple times without cleanup, causing issues. -> Option A

4. Quick Check:

   Missing cleanup causes multiple listeners = problem [OK]

Hint: Always remove event listeners in useEffect cleanup [OK]

Common Mistakes:

• Ignoring cleanup of event listeners
• Blaming scrollTo syntax which is correct
• Assuming browser support is the issue

5. You want to scroll smoothly to a specific section with id 'contact' after navigating to a new page in Next.js. Which approach correctly achieves this?

hard

A. Use window.scrollTo(0, 0); after navigation and then call scrollIntoView without behavior option.

B. Use window.scrollTo({ top: document.getElementById('contact').offsetTop, behavior: 'auto' }); inside routeChangeStart event.

C. Use router.events.on('routeChangeComplete', () => { document.getElementById('contact').scrollIntoView({ behavior: 'smooth' }); });

D. Use router.push('/contact'); without any scroll control; rely on default browser behavior.

Solution

1. Step 1: Choose correct event and method

   Use routeChangeComplete to ensure page is loaded, then scroll to element with smooth behavior.

2. Step 2: Verify scrollIntoView usage

   scrollIntoView({ behavior: 'smooth' }) scrolls smoothly to the element with id 'contact'.

3. Final Answer:

   Use router.events.on('routeChangeComplete', () => { document.getElementById('contact').scrollIntoView({ behavior: 'smooth' }); }); -> Option C

4. Quick Check:

   routeChangeComplete + scrollIntoView smooth = Use router.events.on('routeChangeComplete', () => { document.getElementById('contact').scrollIntoView({ behavior: 'smooth' }); }); [OK]

Hint: Scroll after routeChangeComplete using scrollIntoView with smooth [OK]

Common Mistakes:

• Using routeChangeStart instead of routeChangeComplete
• Forgetting behavior: 'smooth' for smooth scroll
• Relying on default scroll without control