我在NextJS中构建了一个Portfolio,并通过在global.css中执行以下操作实现了平滑滚动
html {
scroll-behavior: smooth
}
这在一定程度上是有效的。当你在其他地方时,导航栏上的“主页”链接可以正常工作,主页部分的最后一个图标可以将你带到“联系人",底部的按钮可以将你带回顶部,但我的其他导航栏项目无法平滑滚动,它只是立即进入该部分。
这是给任何想亲自看看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>
看起来好像只对指向“/”的东西起作用
1条答案
按热度按时间wgx48brx1#
它看起来像是NextJS在Link Tag中处理〈Link?
scroll={false}
的方式,它已经修复了这个问题。阅读文档,似乎默认情况下,会转到顶部,然后滚动回来。