锚点跳转滚动到指定ID功能桌面正常移动端失效，如何修复

可行修复方案如下： #

• 方案1：补充正确的视口配置 #

  先确认页面<head>标签内已添加适配移动端的viewport配置，缺失该配置会导致移动端布局尺寸计算异常，进而导致锚点定位失效：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 方案2：用JS手动实现滚动逻辑（兼容性最优） #

  原生锚点跳转在部分移动端浏览器内核下存在兼容问题，改用JS的scrollIntoView方法可覆盖绝大多数移动端场景：
  1. 先给锚点标签添加自定义类名方便识别：

     <a href="#scrolltotabs" class="custom-anchor">SCROLL</a>
     

  2. 加入对应的JS逻辑：

     document.querySelectorAll('.custom-anchor').forEach(anchor => {
       anchor.addEventListener('click', e => {
         e.preventDefault() // 阻止原生跳转行为
         const target = document.querySelector(anchor.getAttribute('href'))
         target && target.scrollIntoView({
           behavior: 'auto', // 不需要平滑滚动就用auto，要平滑效果改成smooth
           block: 'start'
         })
       })
     })
     

• 方案3：修复自定义滚动容器适配问题 #

  如果你的页面滚动区域不是默认的html/body根元素，而是自定义的设置了overflow: scroll的容器，原生锚点默认无法识别非根滚动容器，必须使用方案2的JS逻辑实现滚动。

• 方案4：适配iOS Safari特殊规则 #

  如果仅在iOS Safari下失效，可给目标元素添加tabindex属性解决内核识别问题：

  <div id="scrolltotabs" tabindex="-1"></div>
  

  同时排查页面是否存在全局touchmove事件拦截，这类自定义滑动事件经常会阻断原生锚点的触发逻辑。

内容的提问来源于stack exchange，提问作者George-Valentin Pele