React导航栏点击跳转需无动画，现有代码实现异常求助

你的代码里存在两处导致平滑滚动的问题，逐一修复即可：

1. 显式设置的平滑滚动参数 #

你在scrollIntoView方法里明确写了behavior: 'smooth'，这就是触发平滑滚动的直接原因。将其改为behavior: 'auto'（或者直接删除该配置，因为默认值就是auto，对应即时跳转）：

const scrollToSection = (id) => {
    const element = document.getElementById(id);
    if (element) {
        element.scrollIntoView({
            behavior: 'auto', // 替换原有的smooth
            block: 'start',
        });
    }
};

2. a标签的默认锚点跳转行为 #

你的a标签带有href="#xxx"属性，浏览器会触发默认锚点跳转。如果浏览器全局开启了平滑滚动（比如系统设置、浏览器配置，或者全局CSS中设置了html { scroll-behavior: smooth; }），这个默认跳转也会变成平滑滚动。需要在点击事件中阻止默认行为：

// 修改每个a标签的onClick回调，添加阻止默认行为的逻辑
<a onClick={(e) => {
    e.preventDefault();
    scrollToSection('hero');
}} className='op' href="#home">HOME</a>

额外排查点 #

如果修复后仍有平滑滚动，检查全局CSS是否存在以下设置，若有则删除或改为auto：

html {
    scroll-behavior: smooth; /* 需移除或改为scroll-behavior: auto; */
}

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