skip to content
w00d1f

css锚点实现跳转过渡动画

/ 1 min read

View more blogs with the tag css
Table of Contents

描点跳转

描点跳转的实现非常简单，a 标签 href 属性绑定要跳转的元素 id 即可。

<!-- 跳转按钮 -->
<a href="#foo"></a>


<!-- 被跳转元素应该在一个被溢出的元素中 -->
<div class="overflowed-wrapper">
  <!-- 要跳转到的元素 -->
  <div id="foo"></div>
</div>

过渡动画

过去锚点跳转的过渡动画，常常使用 js 来实现，如今随着浏览器对 css scroll-behavior 属性的全面支持，可以使用该属性来实现平滑过渡动画。

.overflowed-wrapper {
  scroll-behavior: smooth;
}

参考资料 锚点跳转过渡动画