I am currently facing an issue where smooth scrolling is not working when using next/Link, but it works perfectly fine with anchor tags. However, the downside of using anchor tags is that the page reloads each time, whereas next/link does not reload the page when the path changes.
Css
html {
scroll-behavior: smooth;
}
index.js
{
navItems.map((item, index) => (
<Link key={index} href={item.href} passHref legacyBehavior>
<a className="w-full px-4 py-4 -ml-4 text-gray-500 rounded-md dark:text-gray-300 hover:text-gradient focus:text-gradient focus:bg-indigo-100 dark:focus:bg-gray-800 focus:outline-none dark:focus:bg-neutral-700"
aria-label="Toggle Menu"
onClick={handleOpen}
>
{item.name}
</a>
</Link>
))}
I am looking for a solution to enable smooth scrolling while still using next/link.