滚动行为：顺风不流畅答案

【问题标题】：scroll-behavior:smooth not working in tailwind滚动行为：顺风不流畅
【发布时间】：2022-11-01 03:24:46
【问题描述】：

我正在使用 next.js 和 tailwind Css 构建我的投资组合。我已经在 globals.css 文件中添加了 scroll-behavior : smooth 。在 Navbar 中，我曾经导航到主页，其余部分我使用 id 导航。但是，我只能在导航到主页时看到流畅的效果，其他的不起作用。请你帮助我好吗？谢谢

我想在导航时在我的页面中使用滚动平滑效果。

【问题讨论】：

我已经更正了您的问题，并就如何使用 NextJS 处理 DOM 向您提供了建议。下次请允许我们在涉及 DOM 时查看您的 _app.js，因为它也可能由此而来。
欢迎来到 StackOverflow。请花点时间阅读How to Ask 和minimal reproducible example。祝你好运

标签： html css reactjs next.js tailwind-css

【解决方案1】：

您的问题来自于 Next.js 中的 <Link>。默认情况下，<Link> 将转到顶部，然后向后滚动。您可以从Link Documentation 中阅读，这是完全可以预料的：当您让用户转到另一个页面时，您不希望他处于随机滚动位置，而是在该新页面的顶部。但是在这里，我们停留在同一个页面上，所以我们需要告诉 NextJS。

有一种方法可以防止这种行为，通过添加scroll={false} 来解决您的问题。但是关于 NextJS 是如何工作的以及你是如何实现这种平滑行为的还有其他问题。（从那里，你最初的问题是固定的）

所以它看起来像： <Link href="#link" scroll={false}>

我建议您使用 NextJS 中包含的 _document.js 文件来操作 body 和 html 属性。

根据您的示例，这是我的看法：

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html className="scroll-smooth">
      <Head />
      <body className="bg-[#ecf0f3] text-[#1f2937] tracking-wide ">
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

这样，您可以清理您的 CSS 并应用本机解决方案，您可以肯定的是，每一页（因为 _document.js 是接下来呈现的每个页面的“模板”）

您还应该删除 href 中#id 之前的“/”，因为它没有任何意义。

您可以阅读的链接

_document.js documentation

Tailwind Smooth Scroll

【讨论】：