在前端页面开发中，经常需要用到滚动操作。而JavaScript提供了两个函数可以完成这个任务：window.scroll和window.scrollTo。这两个函数看起来非常相似，但实际上它们有一些细微的差别。在本文中，我们将深入探讨这两个函数的用法和区别，并且给出一些实用的示例代码。
window.scroll
首先，我们来看一下window.scroll函数。该函数接受两个参数，分别是水平方向的滚动量和垂直方向的滚动量。如果只传递一个参数，则默认为垂直方向的滚动量。例如：
window.scroll(0, 100); // 向下滚动 100 像素 window.scroll(100); // 向下滚动 100 像素
这里需要注意的是，window.scroll函数的坐标系是相对于整个页面的左上角，而不是相对于视口的左上角。因此，如果你想要将页面滚动到某个具体元素的位置，需要先计算出该元素相对于页面左上角的坐标，然后再调用window.scroll函数。
window.scrollTo
接下来，我们看看window.scrollTo函数。同样地，该函数也接受两个参数，分别是水平方向的滚动位置和垂直方向的滚动位置。与window.scroll不同的是，window.scrollTo函数的坐标系是相对于视口的左上角的。例如：
window.scrollTo(0, 100); // 向下滚动 100 像素
如果你想要将页面滚动到某个具体元素的位置，可以先计算出该元素相对于视口左上角的位置，然后再调用window.scrollTo函数。
区别及使用场景
那么，两个函数有什么区别呢？从上面的介绍中我们可以看出，window.scroll和window.scrollTo的主要区别在于它们的坐标系不同。window.scroll的坐标系是相对于整个页面的左上角，而window.scrollTo的坐标系是相对于视口的左上角的。
因此，当你需要将页面滚动到某个具体元素的位置时，应该使用window.scrollTo函数。而如果你需要按照一个相对于当前滚动位置的偏移值进行滚动，则应该使用window.scroll函数。
以下是一个使用window.scrollTo函数实现平滑滚动到指定元素位置的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------ -- ---------------
-------
-- ------------ --
---------- -
------- -------
----------- -------
-
-------- -
------- ------
-------------- -----
----------------- -----
-
--------
-------
------
---- ------------------
---- --------------- --------------------
---- --------------- --------------------
---- --------------- --------------------
---- --------------- --------------------
---- --------------- --------------------
------
--------
-------- ---------------------- -
----- ------------- - --------------------------------
-- --------------- -
----- -------------- - ------------------------------------------
----- ------------- - -------------------
----- -------- - -------------- - --------------
----- -------- - -----
--- ----- - -----
------------------------------------- ----------------- -
-- ------ --- ----- ----- - ------------
----- ----------- - ----------- - ------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------