Nuxt3应用中实现平滑滚动失败，已尝试route.options.ts未生效

1. 修正route.options.ts的滚动行为配置 #

你的当前配置仅指定了滚动目标元素，但未开启平滑滚动的行为选项，同时缺少对元素存在性的判断（避免路由切换时元素未渲染完成导致失效）。修改后的代码如下：

import type { RouterConfig } from '@nuxt/schema';

export default <RouterConfig>{
  async scrollBehavior(to) {
    if (to.hash) {
      // 短暂延迟确保DOM元素已挂载（针对路由切换场景）
      await new Promise(resolve => setTimeout(resolve, 100));
      const targetEl = document.querySelector(to.hash);
      if (targetEl) {
        return {
          el: to.hash,
          behavior: 'smooth' // 开启平滑滚动
        };
      }
    }
    // 无锚点时默认滚动到页面顶部
    return { top: 0 };
  },
};

2. 全局CSS兜底配置 #

如果上述配置仍不生效，可以在全局样式文件（比如~/assets/css/main.css）中添加CSS层面的平滑滚动设置，确保浏览器支持：

html {
  scroll-behavior: smooth;
}

3. 验证锚点元素的正确性 #

确认页面中存在ID为testimonials的元素，且ID拼写完全匹配（区分大小写）：

<div id="testimonials">
  <!-- 锚点目标内容 -->
</div>

4. 简化NuxtLink写法 #

你的NuxtLink路径设置是有效的，也可以简化为更直观的写法：

<NuxtLink to="#testimonials">Let's go!</NuxtLink>

内容的提问来源于stack exchange，提问作者samuelreichor