内联CSS设置scroll-behavior:smooth实现平滑滚动失效问题

scroll-behavior: smooth属性必须设置在实际发生滚动的容器元素上才会生效，你把它写在锚点<a>标签本身是无效的。默认无自定义滚动容器的普通网页，滚动行为是由根元素<html>承载的，属性加错位置自然看不到效果。

直接把平滑滚动属性通过内联样式加到<html>标签上即可，不需要额外引入样式文件，修复后代码如下：

<html style="scroll-behavior: smooth;">
<body>
  <div>
    <a href="#quick-contact">REGISTER NOW</a>

    <div id="quick-contact" class="quick-contact pad-bottom-30">
      <h4>REGISTER NOW</h4>
    </div>
  </div>
</body>
</html>

你之前为了测试给a标签加400vh下外边距的样式可以正常保留，只要属性位置正确，点击链接就能看到平滑跳转到表单区域的效果。

• 如果页面是在某个固定高度、设置了overflow: auto/scroll的容器内滚动，就把scroll-behavior: smooth加在这个滚动容器的内联样式上，不用加给html
• 该CSS属性不支持IE、15.4版本以下的Safari，如果需要兼容这些老旧浏览器，才需要额外编写JS逻辑实现平滑滚动，纯CSS场景下上述写法已经符合要求。

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