Smooth Scroll Navigation Prompt – AI-Generated Example

This prompt targets a classic front-end development task: building a navigation menu that smoothly scrolls the page to corresponding sections when a link is clicked, while also highlighting whichever section is currently in view. It is ideal for landing pages, portfolios, documentation sites, or any single-page layout where guiding users through content without full page reloads improves the overall experience.

To reproduce this effectively, use it with a code-generation model such as GPT-4o or Claude, specifying your preferred stack — vanilla JavaScript, React, or a CSS-only approach. You can extend the prompt by requesting an offset for fixed headers, a scroll-spy mechanism using the Intersection Observer API, or animated underline transitions on active nav items. The output typically includes clean, reusable HTML, CSS, and JavaScript that you can drop directly into an existing project with minimal adjustment.