在说滚动之前，看这个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>scroll</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 200px;
overflow: hidden;
}
header,
footer {
height: 130px;
background-color: #666;
}
main {
height: 1000px;
background-color: #ccc;
}
.container {
height: 400px;
background-color: red;
overflow-y: auto;
}
</style>
</head>
<body>
<header>header</header>
<main>主体</main>
<footer>底部</footer>
</body>
</html>
显示如图所示， body 设置的height: 200px; overflow: hidden;没有生效。这是因为 propdef-overflow (opens new window)。
UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.
大致意思就是说UA 必须将根元素上设置的“溢出”属性应用到视口。比如根元素是html，同时根元素具有body这样子的子元素作为视口，如果根元素的overflow属性是visible。那么视口元素（body）的overflow属性必须设置为auto。 所以我们上述的设置无效。加上 html {overflow: auto;}这样子的css， 就能实现body的overflow属性生效。
提示
经验之谈， 如果在做一些官网类的网页时，尽量使用body来作为滚动元素，一般可以获得比较好的滚动体验。
# window.scrollTo
滚动到文档中的某个坐标。
window.scrollTo(x-coord,y-coord )
window.scrollTo(options)
options包含三个属性
top等同于y-coordleft等同于x-coordbehavior类型 String，表示滚动行为，支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值 auto
TIP
通过behavior设置滚动的行为
# window.scrollBy
window.scrollBy() 滚动指定的距离，相对当前的位置进行偏移量滚动，而window.scrollTo滚动至文档中的绝对位置。 参数和scrollTo一样， 可以设置负数值， 表示反向滚动
window.scrollBy({
left: 0,
top: 100,
behavior: 'smooth'
});
# Element.scrollTop
scrollTop是一个可以读写的属性，可以获取设置可滚动元素的滚动top值。
如果设置 document.body.scrollTop的值， 那么必须设置html,body {height: 100%;overflow: auto;}这种属性， 原因上面一开始就解释了， 否则使用body的原生滚动的话，body的高度是被内容撑开的， 设置scrollTop不会生效。
不过这种都是瞬时的， 没有动画。
直接把一个元素滚动到最底部，注意参数是外部父元素。
function scrollToBottom(containerEl) {
if (!containerEl) return;
containerEl.scrollTop = containerEl.scrollHeight + 10000;
}
demo
<style>
.outer {
width: 300px;
height: 600px;
border: 1px solid #ccc;
overflow-y: auto;
}
.inner {
height: 3000px;
}
</style>
<div class="outer">
<div class="inner">222</div>
</div>
<script>
function scrollToBottom(el) {
if (!el) return;
el.scrollTop = el.scrollHeight + 10000;
}
const outer = document.querySelector('.outer');
console.log(outer);
scrollToBottom(outer);
</script>
# Element.scrollIntoView
Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。
box.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'start'
});
behavior可选;定义动画过渡效果，auto或smooth之一。默认为auto。block可选;定义垂直方向的对齐，start、center、end或nearest之一。默认为start。inline可选; 定义水平方向的对齐，start、center、end或nearest之一。默认为nearest。
TIP
nearest 解释一下就是就近，以垂直方向举例，如果目标在上方，那么block就是start。否则就是 end， 如果目标完全可见， 那么不会滚动。
可以查看下面的例子
# 锚点跳转
<a>元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。
跳转到相同页面的元素上就是锚点跳转。 此时元素的href属性的值可以是页面上某一元素的id值
<a href="#footer">goto footer</a>
<footer id="footer">
<span>底部</span>
</footer>
TIP
你可以使用 href="#top" 或空片段（href="#"）来链接到当前页面的顶部。
<a href="#">back to top</a>
<a href="#top">back to top</a>