写在前面
页面文档的滚动是前端开发中常见的一个需求，比如常见的回到顶部按钮，就是点击后页面文档滚动到顶部。如果是控制整个 HTML 文档页面的滚动则是通过 window 对象的 window.scrollTo() ， window.scroll() ， window.scrollBy() 三个方法来实现的，若是控制页面中的某个元素内部的内容的滚动则是通过 DOM 元素的 scrollTop 和 scrollLeft 属性和 scrollIntoView() 方法来实现的。
滚动整个文档
滚动整个文档是常用的页面滚动方式。浏览器的视口（viewport）和网页的 HTML 文档的大小是不一样的，由于 HTML 文档的宽高会远远高于浏览器的视口宽高，因此当想要看到整个页面文档内容时就需要滚动文档内容。但是，如果 HTML 文档内容的大小小于等于浏览器的视口时，那么此时就没有滚动一说法了，因此，当你使用以下方法没有效果时，那么看看你的 HTML 文档大小吧，简单说就是看有没有滚动条啦。
1. window.scrollTo() 滚动到
window.scrollTo() 方法有两种传参方式，其中滚动数值默认单位是像素，因此传参时只写值，不写单位。
window.scrollTo(x-coord, y-coord)
其中 x-coord 值表示你想要置于左上角的像素点的横坐标，y-coord 值表示你想要置于左上角的像素点的纵坐标。这里的像素点是在整个 HTML 文档里的点，横纵坐标也是该像素点在整个 HTML 文档里的位置，整个 HTML 文档的坐标系如下：
所以就像上图中的一个点的坐标为 (50,40)，想要将其移动到浏览器视口的左上角，那就是
window.scrollTo(50, 40)
window.scrollTo(options)
options 是一个选项对象，其属性有三个：
top: HTML 文档滚动后页面左上角的垂直坐标，也就是上述方式的 y-coord 的值的大小
left: HTML 文档滚动后页面左上角的水平坐标，也就是上述方式的 x-coord 的值的大小
behavior: 字符串，表示滚动的方式，有三个可能值（smooth、instant、auto），默认值为auto（也就是 instant）
window.scrollTo({top: 40,left: 50,behavior: "smooth"})
2. window.scroll() 滚动
window.scroll() 方法是 window.scrollTo() 方法的别名，用法一毛一样。
3. window.scrollBy() 滚动了
window.scrollTo() 是一个绝对的位置，就是无论 HTML 文档在浏览器视口中现在是个什么状态，都会根据参数滚动到指定的位置，而 window.scrollBy() 就是一个相对位置，在 HTML 文档当前的状态下向上滚动多少像素，向下滚动多少像素。也是有两种传参方式。
window.scrollBy(x-coord, y-coord)
这里的 x-coord 就是向左滚动多少，是数值，不带单位。y-coord 就是向下滚动多少。
window.scrollBy(options)
这里的 options 和 window.scrollTo(options) 的 options 是一样的用法。只不过是向左、向上滚动了的距离。
滚动元素内的整个内容
滚动整个 HTML 文档相对的容器是浏览器的视口，如果页面中的一个 div 元素作为容器时，当其里面的内容文档宽高大于该 div 的宽高，并且 overflow = auto / scroll 时也会出现内容的滚动，此时，也可以在该 div 元素内调用滚动整个内容的 API。对比之下，此时的 div 元素就等同于 viewport 视口，div 元素的整个内容就等同于 HTML 文档。
1. Element.scrollTop
scrollTop 是一个属性，用于获取、设置一个元素内容放在左上角的坐标点的垂直 y 坐标像素，是一个绝对的位置。
2. Element.scrollLeft
scrollLeft 也是一个属性，用于获取、设置一个元素中位于左上角的坐标点的水平 x 坐标像素，是个绝对位置。
3. ChildElement.scrollIntoView()
scrollIntoView() 是一个方法，是一个实验中的功能，根据语义就知道是将整个文档中的某一个元素滚动到视野中。取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端。因为是实验中的功能，不推荐使用，详细用法看 mdn。
若有收获，就点个赞吧
0 人点赞
