在前端开发中，我们经常需要添加“回到顶部”的按钮，帮助用户快速返回页面顶部。通常情况下，我们会使用浏览器原生的滚动事件 window.scroll 和 window.scrollTo 实现该功能。但是，这种方式并不能提供良好的用户体验，因为快速返回页面顶部可能会使得用户感到不适。本文将详细介绍如何使用 jQuery 的 animate() 函数来缓慢回到顶部，以提升用户体验。
animate() 函数简介
animate() 是 jQuery 提供的一个用于实现动画效果的函数。它可以改变元素的 CSS 样式、位置、大小等属性，并且支持链式调用和回调函数。具体语法如下：
$(selector).animate(styles, speed, easing, callback);
其中，selector 表示需要进行动画处理的元素，styles 是一个包含 CSS 属性和值的对象，表示动画结束时元素所应用的样式。speed 表示动画执行的时间（单位毫秒），默认值为 400 毫秒。easing 是一个用于指定动画类型的字符串或函数，常见的有 "linear"、"swing" 等。callback 是一个在动画完成后执行的函数。
缓慢返回顶部示例代码
下面是一个简单的示例，演示如何使用 animate() 函数来实现缓慢返回顶部的效果：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ------ -- -----------
-------
------------ -
-------- -----
--------- ------
------- -----
------ -----
-------- ---
---------- -----
------- -----
-------- -----
----------------- -----
------ ------
------- --------
-------- -----
-------------- ----
-
------------------ -
----------------- -----
-
--------
------- -----------------------------------------------------------
--------
---------------------------- -
-- ------- --- ------------
--------------------------- -
-- -------------------- - ---- -
---------------------------
- ---- -
----------------------------
-
---
-- ------------------
---------------------------------- -
-------- ---------------- ---------- - -- -----
------ ------
---
---
---------
-------
------
---------- ----- ----- --- ----- ----------- ---------- ----- --- --- ------------
---------- ------ ----- --------- ----- --------- ---- --------- ----- -----------
---------- --------- ----- ---- ----- ----- ---- ------ --------- ---- ------- ---- --------- ----- -----------
------- ------------------------------
-------
-------在这个示例中，我们首先使用 CSS 定义了一个 ID 为 back-to-top 的按钮，它的样式、位置等信息都定义在 <style> 标签中。然后，在页面加载完成后，我们使用 jQuery 的 $(document).ready() 函数来注册了两个事件：
- 当页面滚动超过 200 像素时，显示“回到顶部”的按钮；
- 点击“回到顶部”按钮时，通过
animate()函数缓慢返回页面顶部。
在上述代码中，我们通过 `$('html, body').
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27557