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