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.