Smooth Scroll Only Works on 50% of my web page

Question

I have built a Portfolio in NextJS and I've enabled smooth scrolling by doing the following inside global.css

html { 
   scroll-behavior: smooth
}

This somewhat works. As in the 'Home' link on the Navbar works when you are elsewhere, the last Icon on the Home section which takes you to 'Contact' works, the button right at the bottom to take you back to the top also works however my other Navbar items fail to smooth scroll, it just instantly goes to that section.

This is the link for anyone who wants to see for themselves https://danblock.vercel.app/

Relevant Code - Contact (Not working)

<Link href="/#contact">
          <li className="ml-10 text-sm uppercase hover:border-b">
            Contact
          </li>
        </Link>

Home - Working

<Link href="/">
          <li className="ml-10 text-sm uppercase hover:border-b">Home</li>
        </Link>

Scroll to top button (working)

<Link href="/">
        <div className="rounded-full shadow-lg shadow-gray-400 p-4 
         cursor-pointer hover:scale-110 ease-in duration-300">
          <HiOutlineChevronDoubleUp className="text-[#FF0000]/80" 
          size={30} />
        </div>
      </Link>

It looks as if it's only working for things directing to "/"

Answer 1

It looks like it's within the way NextJS handles <Link? scroll={false} inside the Link Tag, it has fixed the issue.

Reading documents, it seems by default, will go to the top, and then scroll back.