邮件内点击图片滚动到section_one失效问题求助（Gmail环境）

针对Gmail自动修改锚点href前缀导致滚动失效的问题，以下是几个可行的解决方案：

• 使用name属性补充id
  Gmail会对元素的id属性添加随机前缀，但不会篡改name属性。给目标<tr>同时添加name属性，将链接的href指向该name值：

  <a href="#section_one_anchor">
      <img src="img.png" alt="">
  </a>
  
  <tr style="margin-bottom: 40px;" id="section_one" name="section_one_anchor">
      <td>
          <table class="step1-section">
              <tr style="margin-bottom: 24px;">
                  <td>
                      <p class="heading-2">Some text</p>
                  </td>
              </tr>
          </table>
      </td>
  </tr>
  

• 添加隐藏锚点标签
  在目标区域顶部插入一个隐藏的<a>标签作为锚点，通过name属性实现跳转，这种方式兼容性更强：

  <a href="#section_one_anchor">
      <img src="img.png" alt="">
  </a>
  
  <!-- 隐藏锚点 -->
  <a name="section_one_anchor" style="display: block; height: 0; margin: 0; padding: 0; overflow: hidden;"></a>
  <tr style="margin-bottom: 40px;" id="section_one">
      <td>
          <table class="step1-section">
              <tr style="margin-bottom: 24px;">
                  <td>
                      <p class="heading-2">Some text</p>
                  </td>
              </tr>
          </table>
      </td>
  </tr>
  

• 内联JS触发滚动（备选）
  若邮件客户端支持内联JavaScript，可通过点击事件定位到包含原id的元素（Gmail会保留原id在新id中）：

  <img src="img.png" alt="" onclick="document.querySelector('[id*=section_one]').scrollIntoView({behavior: 'smooth'});">
  
  <tr style="margin-bottom: 40px;" id="section_one">
      <td>
          <table class="step1-section">
              <tr style="margin-bottom: 24px;">
                  <td>
                      <p class="heading-2">Some text</p>
                  </td>
              </tr>
          </table>
      </td>
  </tr>
  

  注意：部分邮件客户端禁用JavaScript，此方案仅作为补充。

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