在前端开发中，我们经常会遇到需要滚动到 div 中的一个特定元素的场景，比如点击某个链接后页面滚动到对应的锚点位置。本文将介绍两种实现滚动到 div 中的元素的方法。
方法一：使用原生 JavaScript
- 获取要滚动到的元素的位置信息
使用 offsetTop 属性可以获取元素相对于父元素的垂直偏移量。如果要获取相对于文档顶部的距离，则需要递归地获取父元素的 offsetTop 值，并累加各个值。
-------- --------------------- -
--- --------- - ------------------
----- ---------------------- -
------- - ---------------------
--------- -- ------------------
-
------ ----------
-
----- ------------- - ----------------------------------
----- --------------- - ----------------------------- 滚动到指定位置
使用 window.scrollTo() 方法可以让页面滚动到指定位置。该方法接受两个参数：水平和垂直方向上的滚动距离。
----------------- ---- ---------------- --------- -------- ---
其中，behavior 参数控制滚动的行为。设置为 'smooth' 可以使滚动过程更加平滑。
下面是完整的示例代码：
---- -------------------------
------- -------------------------------------------
--------
-------- --------------------- -
--- --------- - ------------------
----- ---------------------- -
------- - ---------------------
--------- -- ------------------
-
------ ----------
-
-------- ---------------- -
----- ------------- - ----------------------------------
----- --------------- - ----------------------------
-----------------
---- ----------------
--------- --------
---
-
---------方法二：使用第三方库
如果不想手动实现滚动到指定元素的功能，也可以使用第三方库。这里介绍一下两个常用的库：jQuery 和 Lodash.
使用 jQuery
jQuery 是一个非常流行的 JavaScript 库，提供了许多实用的功能，包括滚动到指定元素。
----- ------------- - -------------
-------- ----------------
---------- --------------------------
-- ------其中，offset() 方法返回元素相对于文档顶部和左侧的偏移量。animate() 方法可以让页面平滑地滚动到指定位置。
完整的示例代码如下：
---- -------------------------
------- -------------------------------------------
------- -----------------------------------------------------------
--------
-------- ---------------- -
----- ------------- - -------------
-------- ----------------
---------- --------------------------
-- ------
-
---------使用 Lodash
Lodash 是一个实用的 JavaScript 工具库，提供了许多常用的函数。其中就包括滚动到指定元素的函数。
----- ------------- - ---------------------------------- --------------------------
完整的示例代码如下：
---- ------------------------- ------- ------------------------------------------- ------- ------------------------------------------------------------------------- -------- -------- ---------------- - ----- ------------- - ---------------------------------- -------------------------- - ---------
总结
本文介绍了两种实现
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12029