光滑卷轴只在我50%的网页上工作。

Question

我已经在NextJS中构建了一个投资组合，并通过在global.css中执行以下操作启用了平滑滚动

html { 
   scroll-behavior: smooth
}

这在某种程度上可行。在Navbar上的“Home”链接中，当你在其他地方的时候，主页上的最后一个图标可以让你“联系”，底部的按钮可以把你带回到顶部，但是我的其他导航条项目不能顺利滚动，它就会立即转到那个部分。

这是任何想自己看https://danblock.vercel.app/的人的链接

相关代码-联系人(不起作用)

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

在家工作

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

滚动到顶部按钮(工作)

<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>

看起来它只适用于指向"/“的东西。

Answer 1

看起来就像NextJS在Link标记中处理scroll={false}的方式一样，它解决了这个问题。

在默认情况下，读取文档似乎会转到顶部，然后向后滚动。