实现平滑的“回到顶部”功能

别放弃你热爱学习的心

于 2020-08-12 20:11:07 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42617625/article/details/107965663

本文介绍了如何使用CSS和JavaScript实现平滑的“回到顶部”功能。CSS实现依赖于`scroll-behavior: smooth;`属性，但不支持IE和旧版Edge，而JavaScript实现利用`requestAnimationFrame`来创建动画效果，确保在浏览器重绘时平滑滚动。在浏览器未激活状态下，动画会暂停，激活后继续执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，直接切入正题。

实现平滑的回到顶部或者去到指定的位置，有两种实现方式

CSS
JavaScript

CSS实现

主要是通过CSS属性scroll-behavior来实现，我们来看代码：

<!-- html -->
<!DOCTYPE html>
<html lang="zh-CN" id="html">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style

最低0.47元/天解锁文章