锚点链接桌面端正常移动端失效，移动端图片id标签丢失求助

核心问题 #

锚点在移动端失效的直接原因是图片的id="anchor"被移除了——链接#anchor找不到对应目标元素，自然没有反应。

id被移除的常见原因 #

• 移动端适配脚本/懒加载插件：很多图片优化工具在处理移动端图片时，会重写DOM结构，误删id属性。
• CMS/框架渲染差异：如果使用WordPress、React这类工具，移动端的渲染逻辑可能和桌面端不同，导致id未被正常输出。
• 浏览器隐私插件：部分移动端广告拦截、隐私保护插件会误判元素，移除id属性。

可行解决方法 #

1. 更换锚点目标 #

把锚点放在不会被优化的容器元素上，避开容易被修改的图片：

<!-- 锚点容器（高度设为0避免占用空间） -->
<div id="anchor" style="height:0; overflow:hidden;"></div>
<!-- 你的图片 -->
<img src="link_to_image.jpg">

锚点链接保持<a href="#anchor">link to anchor</a>即可，空div不会被脚本盯上，id能稳定保留。

2. 检查优化插件配置 #

如果用了图片懒加载或响应式插件，去查看插件设置，寻找“保留元素id”的选项，或者把该图片的id加入白名单，防止被脚本修改。

3. JS兜底添加id #

如果初始渲染时id被删除，用JS在页面加载完成后手动补上：

window.addEventListener('load', () => {
  const targetImg = document.querySelector('img[src="link_to_image.jpg"]');
  if (targetImg) targetImg.id = 'anchor';
});

4. 排查浏览器插件 #

让用户暂时关闭移动端浏览器的广告拦截、隐私保护插件，测试id是否保留、锚点能否正常跳转。如果是插件问题，提示用户将网站加入插件白名单。

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