CSS与HTML实现指定页面平滑滚动不生效问题排查

scroll-behavior: smooth 只有设置在实际产生滚动行为的容器上才会生效。你当前代码把属性挂在了.scroll-to-table这个普通静态div上，这个元素本身没有滚动条、不是页面的滚动载体，自然不会触发平滑滚动效果。
另外你的HTML结构存在语法问题：<li>标签的直接父级必须是<ul>/<ol>列表标签，直接嵌套在div下属于无效结构，虽然不直接导致锚点失效，但可能引发其他样式、交互异常。

方案1：纯CSS实现（无JS，不影响全站） #

你不需要给全局html标签设置样式，只需要借助目标页面独有的页面类（比如Shopify产品页默认自带template-product类在body上，其他类型页面不会有这个类），限定样式只在当前页面生效即可：

/* 仅对当前专属页面的根滚动容器生效，不会污染其他页面 */
.template-product {
  scroll-behavior: smooth;
}

同时修正你的HTML结构，补全列表父标签：

{% if section.settings.display_product_detail_description == false and section.settings.display_product_reviews == false and section.settings.display_shipping_returns == false %}
{% assign tab5_active = true %}
{% endif %}

<div class="scroll-to-table">
  <!-- 补全ul标签，修正无效HTML结构 -->      
  <ul class="tab-nav">
    <li class="tab-title">
      <a href="#product_attributes_table" class="tab-links {% if tab5_active %} active {% endif %}">
        Specs
      </a>
    </li>
  </ul>
</div>

方案2：原生JS实现（可控性更高，无全局样式污染） #

如果不想修改根滚动容器的CSS，直接在当前section代码底部加一段原生JS即可，只绑定当前模块的锚点事件，完全不会影响其他页面、其他模块的交互：

// 仅为当前区域的锚点绑定平滑滚动
document.querySelectorAll('.scroll-to-table a[href^="#"]').forEach(trigger => {
  trigger.addEventListener('click', e => {
    e.preventDefault()
    const target = document.querySelector(trigger.getAttribute('href'))
    if (!target) return
    target.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  })
})

不管是换ID选择器、还是调整CSS挂载的普通div元素，只要没把scroll-behavior加在真正的滚动容器上，属性都不会生效。普通无滚动条的静态元素设置这个属性没有任何作用。

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