React JS：内部锚点链接点击滚动后更新URL并加载默认页面，如何避免URL更新？

这个问题我之前开发React项目时也碰到过，明明只是想做个回到顶部的滚动，结果浏览器直接更新URL并跳去了默认页面，确实挺闹心的。下面给你几个实用的解决办法，按需选择就行：

方法一：阻止a标签的默认行为 #

这是最直接的方式，给<a>标签添加onClick事件，手动阻止浏览器默认的URL更新和跳转行为，然后自己实现滚动逻辑：

<a 
  href="#" 
  onClick={(e) => {
    // 阻止a标签的默认导航行为
    e.preventDefault();
    // 滚动到顶部，可选添加平滑滚动效果
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }}
>
  Go to Top
</a>

这样点击链接时，只会执行我们定义的滚动操作，不会修改URL，自然也不会触发React路由的跳转逻辑。

方法二：改用button标签（更语义化） #

如果你的“链接”只是用来触发页面内滚动，而非跳转外部或路由页面，用<button>标签其实更符合HTML语义规范，也从根源上避免了a标签的默认导航问题：

<button 
  onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
  style={{ 
    background: 'none', 
    border: 'none', 
    color: '#0066cc', 
    textDecoration: 'underline', 
    cursor: 'pointer' 
  }}
>
  Go to Top
</button>

通过简单的样式调整，就能让按钮看起来和普通链接一模一样，同时完全不会触发任何路由相关的行为。

方法三：用Ref定位页面内元素（适合跳转到特定区域） #

如果是要跳转到页面内某个具体元素（而非顶部），可以用React的useRef钩子来精准定位，比传统的锚点链接更可控：

import { useRef } from 'react';

function MyPage() {
  // 创建一个ref绑定到目标元素
  const targetSectionRef = useRef(null);

  const scrollToTarget = () => {
    // 使用scrollIntoView实现滚动，支持平滑效果
    targetSectionRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <button onClick={scrollToTarget}>Go to Target Section</button>
      
      {/* 目标元素，绑定ref */}
      <div ref={targetSectionRef} id="target-section">
        这是要跳转到的区域
      </div>
    </div>
  );
}

这种方式不仅不会修改URL，还能更灵活地控制滚动行为，比如调整滚动的对齐方式等。

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