前言：自己本身对css 涉足不深，所以对css的某些属性有时也说不清楚原理，可能有些属性都不知道，
可能三年前你对这个功能很熟悉，
top↑ （脑补。。。 到顶部, enenen）
此时你大脑是不是已经想到了好几种方法
让我们看看都有哪些
那个时候的我们处理这个，那是觉得相当的easy，而且还有好几种方案
// 第一种 锚点 （这个好像不是很常用，用个例场景）
<body style="height:2000px;">
<div id="topAnchor"></div>
<a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>
// 第二种 scrollTop （较常见）
<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0
}
</script>
</body>
// 第三种 scrollTo (常见)
<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
window.scrollTo( 0, 0);
}
</script>
</body>
// 第四种 scrollBy (不常见，没用过 黑脸ing) Window.scrollBy() - Web API 接口参考 | MDN
<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
var top = document.body.scrollTop || document.documentElement.scrollTop
scrollBy(0,-top);
}
</script>
</body>
// 第五种 scrollIntoView()
<body style="height:2000px;">
<div id="target"></div>
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
target.scrollIntoView();
}
</script>
</body>
上面的方案里面，最常见的应该是第二种，直接将body.scrollTop = 0 ,这种是最直接，也是最干脆的，那时候的我们不注重交互体验，功能实现就是第一，老板来了都点赞...
Ok,我们介绍今天的重点，如何，让滑动变得更加的丝滑，引入我这个菜鸟之前不知道的属性
- Css: scroll-behavior （通过css属性来实现过渡）
- js：behavior （通过js来实现过渡）
[css] Scroll-behavior: smooth
这个属性可以放在某一个指定元素上，也可以放在body上， 作用的对象是元素
它会在你的元素有点击切换的行为时，增加滑动的动画，来增加用户扁平化的体验
点击横向数字来体验
这个属性，不能设置时间限制，多少毫秒内完成动画效果
[js] scrollTop 无过渡效果
这个大家应该都非常清楚它的功能以及用法，就不老生常谈了
// 需要注意的是，我们既可以设置元素的滚动高度，同样也可以获取元素的滚动高度
element.scrollTop = number;
const num = element.scrollTop
// 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"**non-scrollable"**属性）， scrollTop将被设置为0。
// 设置scrollTop的值小于 0，scrollTop 被设为0
// 如果设置了超出这个容器可滚动的值，scrollTop 会被设为最大值。
[js] scrollTo, scrollBy, scroll
window.scrollTo || window.scrollBy || window.scroll 三种方法 语法和原理相通， 可通过参数配置来实现滑动的过渡效果
element.scrollBy(x-coord, y-coord); element.scrollBy(options)
window.scroll(x-coord, y-coord); window.scroll(options)
window.scrollTo(x-coord,y-coord); window.scrollTo(options)
x-coord 是元素要在横轴上滚动的距离。 left
y-coord 是元素要在纵轴上滚动的距离。 top
options 是一个包含三个属性的对象:
{
top: number;
Left: number;
behavior: 'smooth' | 'instant' | 'auto' // *平滑滚动 瞬间滚动 默认值*
}
window.scrollTo(0, 0)
window.scrollTo({
top: 0,
left:0,
behavior: 'smooth'
});
// 其他同理
案例：
[js] scrollIntoView
让元素滚动到可视区域， 可通过参数配置来完成过渡效果
//简写使用： element.scrollIntoView(alignToTop);
// 解释
alignToTop：true | false
true，默认值，元素的顶端将和其所在滚动区的可视区域的顶端对齐
相当于 scrollIntoViewOptions: {block: 'start', inline: 'nearest'}，
false，元素的底端将和其所在滚动区的可视区域的底端对齐
相当于 scrollIntoViewOptions: {block: 'end', inline: 'nearest'}，
// 整体使用
element.scrollIntoView({
block: 'start' | 'end' | 'center' | 'nearest',
inline: 'start' | 'end' | 'center' | 'nearest',
behavior: 'smooth' | 'auto',
});
// 含义
block 可选 定义垂直方向的对齐，
start、center、end 或 nearest 之一。默认为 start。
inline 可选 定义水平方向的对齐，
start、center、end 或 nearest 之一。默认为 nearest。
behavior 可选 定义动画过渡效果，auto 或 smooth 之一。默认为 auto。
*/
小拓展：
history.scrollRestoration
设置返回页面是否返回原滚动位置
在从页面跳转回来的时候，一般浏览器都会“贴心”地返回到该页面原来的滚动位置，该行为由 history.scrollRestoration 属性控制的，默认是“auto”，
若不想回到原来的位置，可将值设为“manual”，手动，即不返回原位置，而是手动返回，此时浏览器会返回到页面顶部。但据测试，“返回”都是瞬间的，即使设置了 scroll-behavior: smooth 也无效
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
overscroll-behavior: contain;
滚动链
有这么一个场景，有一天你在浏览网页的时候，中间存在一个滚动区域的模块，当你滚动到模块底部时，继续滚动的时候，整个网页会继续滑动，在某些情况下我们其实不想要这些表现，可以使用 overscroll-behavior 来去除不需要的滚动链
scroll-snap-*
规范滚动元素的定位
这个属性是很有用的，可以用纯CSS来实现各种多屏滚动效果，到临界点的时候触发向上 或者 向下滚动， 有点超出某一高度再滑动的感觉，
这里有一个点，当某一模块需要整体滑动时，即模块在屏幕中显示高度不足某一比例时，显示为上个模块，当达到某一比例，显示当前模块，也叫整屏滚动，可以利用当前css属性来实现，最后一个模块案例可以体验
滑动某一模块 体验该属性
更多功能可以参考这篇
