在前端开发中，平滑地滚动到指定的 div 是一项很常见而且重要的功能。当用户单击导航菜单或者页面上其他链接时，能够平滑地滚动到对应的位置，可以提高用户体验和页面的可用性。本文将介绍如何使用纯 JavaScript 和 jQuery 实现平滑滚动，并深入探讨其原理。
纯 JavaScript 方案
在纯 JavaScript 中，我们可以使用 window.scrollTo() 方法实现滚动到某个位置。但是，这种方法滚动速度过快，没有平滑感。为了实现平滑滚动效果，我们需要使用 requestAnimationFrame() 方法来控制滚动位置的变化速度。
-- -------------------- ---- -------
-------- -------------------- --------- -
----- -------------- - -----------------
----- ------------- - -------------------
----- -------- - -------------- - --------------
--- --------- - -----
-------- ---------------------- -
-- ---------- --- ----- --------- - ------------
----- ----------- - ----------- - ----------
----- --- - ----------------- -------------- --------- ----------
------------------ -----
-- ------------ - --------- ---------------------------------
-
-------- ------- -- -- -- -
- -- - - --
-- -- - -- ------ -- - -- - - - - - --
----
------ --- - -- - -- - -- - -- - -- - --
-
---------------------------------
-这段代码中，我们定义了一个 smoothScroll 函数，它接收两个参数：需要滚动到的目标 div 和滚动的持续时间。在函数内部，我们通过 target.offsetTop 和 window.pageYOffset 获取目标位置和当前位置，并计算出它们之间的距离。
然后，我们将 requestAnimationFrame() 方法传递给 animation() 函数进行动画处理。在 animation() 函数中，我们计算出经过的时间并使用 ease() 函数实现缓动效果。最后，在每次帧更新时，我们将计算出的值作为滚动位置传递给 window.scrollTo() 方法。
jQuery 方案
在使用 jQuery 的情况下，实现平滑滚动非常简单。我们可以使用 animate() 方法来控制滚动位置的变化速度。
function smoothScroll(target, duration) {
$("html, body").animate(
{
scrollTop: $(target).offset().top,
},
duration
);
}这段代码中，我们定义了一个 smoothScroll 函数，它接收两个参数：需要滚动到的目标 div 和滚动的持续时间。我们使用 $() 函数获取目标位置和当前位置，并使用 animate() 方法实现滚动效果。
结论
平滑滚动是一项非常实用的功能，可以提高用户体验和页面可用性。在本文中，我们介绍了如何使用纯 JavaScript 和 jQuery 实现平滑滚动，并深入探讨了其原理。通过这些知识和示例代码，你可以轻松地实现平滑滚动功能，并提高你的页面设计水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9768
