在前端开发中，经常需要使用 scrollTop 属性来实现一些页面滚动相关的效果。通常情况下，我们会使用 jQuery 来实现这个功能，但是有时候项目并不需要引入 jQuery 这个库，那么该如何实现呢？本文将介绍如何使用纯 JavaScript 实现 scrollTop 动画。
实现思路
要实现 scrollTop 动画，其实只需要两步：
- 获取当前的
scrollTop值； - 将
scrollTop值逐渐改变到目标值，从而实现动画效果。
具体实现思路如下：
- 获取当前
scrollTop值
使用 document.documentElement.scrollTop || document.body.scrollTop 获取当前页面的 scrollTop 值。
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
- 改变
scrollTop值
定义一个函数，在函数内部通过 requestAnimationFrame 不断更新 scrollTop 值，直到达到目标值。这里使用 easeInOutCubic 函数来实现缓动效果。
-- -------------------- ---- -------
-------- ------------------------ ------ ------- -
-- ----- --------- -
----- ------- - -------------- -- -----------------------------------
--- ----------- - --
-- ----- --------
-- ------- --------------
----- - ----- -- -----
------ - ------ -- -----------------
-- --------
----- ---- - ------------- ------------------------- - -------------- - ------ ----- - -----
-- ----
----- ------- - -
--------------- ------------- -
-- ----- -- ---- - -- -
------ --- - ------------- ---
-
------ --- - -------------- - --- -- - ---
-
--
----- -------- - ----------------
-- --------------------- ----
-------- ------ -
----------- -- - - ---
----- - - ----------- - ----- - ------
----- - - ------------
-- -- - -- -
-----------------------------------
------------------ ------- - --------------- - -------- - ----
- ---- -
------------------ ---------------
-
-
-- ------
-------
-使用示例
在需要使用 scrollTop 动画时，只需要调用 scrollToY 函数即可。下面是一个简单的使用示例：
// 滚动到页面底部 const pageHeight = document.documentElement.scrollHeight - window.innerHeight; scrollToY(pageHeight, 2000, 'easeInOutCubic');
总结
通过本文的介绍，我们了解了如何使用纯 JavaScript 实现 scrollTop 动画。使用这种方式实现动画，不仅可以减小项目的体积，还可以避免引入 jQuery 带来的额外开销。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13990