I need help setting up a feature in Next.js that allows for:
Upon clicking a link, the page scrolls to a specific section on the same page. The clicked link becomes visually active (changing color, adding underline, etc.) once scrolled to the corresponding section. This scrolling action is facilitated using an ID within the href attribute of the link.
Here is a snippet of my code:
<ul className = "font-medium flex flex-col p-4 md:p-0 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 transition-all" > {
navLinks.map((link, index) => {
return (
<li key = {index} >
<Link href = {`#${link.path}`}
scroll className = {cn("block py-2 px-3 text-white rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white hover:dark:text-blue-500 transition-all")}
aria-current = "page" >
{
link.name
}
</Link>
</li>
);
})
} </ul>
Desired Outcome:
When a user clicks on a link with an href containing an ID (e.g., #section1), the page should smoothly scroll to the corresponding element with that ID. The clicked link should visually indicate its active state through CSS styling changes or the addition of a new class.