如何避免设置scroll-behavior:smooth后页面加载自动平滑滚动到锚点？

你遇到的问题是因为当URL包含锚点时，浏览器加载页面会自动定位到对应元素，而全局设置的scroll-behavior: smooth会把这个初始定位也变成平滑滚动。下面提供两种实用的解决方法：

方法一：延迟启用平滑滚动 #

页面加载完成后再设置scroll-behavior，这样初始的锚点定位是瞬间完成的，之后点击链接才会触发平滑滚动。

1. 先修改CSS，暂时关闭全局平滑滚动：

html { scroll-behavior: auto; }

2. 添加JavaScript代码，在页面加载完成后开启平滑滚动：

window.addEventListener('load', () => {
  document.documentElement.style.scrollBehavior = 'smooth';
});

方法二：用JavaScript单独控制点击时的平滑滚动 #

完全通过JS处理内部链接的点击事件，放弃全局CSS的scroll-behavior，精准控制平滑滚动的触发时机，页面加载时的锚点定位保持默认的瞬间跳转。

1. 移除CSS中的scroll-behavior: smooth设置。

2. 添加以下JavaScript代码：

// 遍历所有指向页面内锚点的链接
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止浏览器默认的锚点跳转行为
    
    const targetId = anchor.getAttribute('href');
    if (targetId === '#') return; // 跳过指向当前页面顶部的空锚点
    
    const targetElement = document.querySelector(targetId);
    if (targetElement) {
      // 执行平滑滚动
      targetElement.scrollIntoView({
        behavior: 'smooth',
        block: 'start' // 可选：控制滚动后目标元素的位置，比如'center'
      });
      // 更新URL中的锚点，保持浏览器历史记录正常
      history.pushState(null, null, targetId);
    }
  });
});

两种方法各有优势：方法一实现简单，适合不需要复杂自定义的场景；方法二更灵活，能让你对滚动行为做更多定制（比如调整滚动的对齐方式、添加额外逻辑）。

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