纯CSS平滑滚动到相同页面的锚式超链接，没有Javascript

Question

在这个医院网站上有一个很好的过渡动画效果当点击一个字母链接，跳转到选定的锚文本有一个容易平滑的动画效果，使访问者下页。

使用Chrome，我无法看到他们使用的CSS转换效果。我想学习这一技术，并能够做一个CSS只有过渡效果，如果可能的话，只对相同的页面锚的垂直移动，最好不是动画在页面上的其他任何东西，只是垂直移动锚卷轴。

HTML

<article>
<!-- Hyperlink -->
<a href="#LetterE">Scroll Down to letter E</a>


<!-- Anchor further down the page -->
<a name="LetterE"></a>


</article>

CSS：

article a{/* ?? */}

谢谢!

​

​

更新

​

​

奇怪！当我覆盖Chrome 103的chrome://flags/中的“平滑滚动”设置，从默认到启用，那么平滑滚动工作，在我的网站和建议的例子链接在评论中看起来都很漂亮！但是当我将设置值返回到“默认”时，它就不起作用了，无论是在我的网站上还是在建议的链接上！但是，在这个问题中，它确实在上面的医院链接上起作用！

Answer 1

有一个名为滚动行为的css属性。您可以将其放在html上，所有锚都将被称为使用定义的动画。

在这种情况下：html {scroll-behavior: smooth;}

现有的价值是：

• auto (眨眼间的瞬间跳跃)
• smooth (光滑'-')
• initial (浏览器的默认值)
• inherit (父本拷贝值)；