访客 前言：自己本身对css涉足不深，所以对css的某些属性有时也说不清楚原理，可能有些属性都不知道，
可能三年前你对这个功能很熟悉，
top↑（脑补。。。到顶部,enenen）
此时你大脑是不是已经想到了好几种方法
让我们看看都有哪些
那个时候的我们处理这个，那是觉得相当的easy，而且还有好几种方案
//第一种锚点（这个好像不是很常用，用个例场景）<bodystyle="height:2000px;"><divid="topAnchor"></div><ahref="#topAnchor"style="position:fixed;right:0;bottom:0">回到顶部</a></body>//第二种scrollTop（较常见）<bodystyle="height:2000px;"><buttonid="test"style="position:fixed;right:0;bottom:0">回到顶部</button><script>test.onclick=function(){document.body.scrollTop=0;document.documentElement.scrollTop=0}</script></body>//第三种scrollTo(常见)<bodystyle="height:2000px;"><buttonid="test"style="position:fixed;right:0;bottom:0">回到顶部</button><script>test.onclick=function(){window.scrollTo(0,0);}</script></body>//第四种scrollBy(不常见，没用过黑脸ing)Window.scrollBy()-WebAPI接口参考|MDN<bodystyle="height:2000px;"><buttonid="test"style="position:fixed;right:0;bottom:0">回到顶部</button><script>test.onclick=function(){vartop=document.body.scrollTop||document.documentElement.scrollTopscrollBy(0,-top);}</script></body>//第五种scrollIntoView()<bodystyle="height:2000px;"><divid="target"></div><buttonid="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;constnum=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是元素要在横轴上滚动的距离。lefty-coord是元素要在纵轴上滚动的距离。topoptions是一个包含三个属性的对象:{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|falsetrue，默认值，元素的顶端将和其所在滚动区的可视区域的顶端对齐相当于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'inhistory){history.scrollRestoration='manual';}overscroll-behavior:contain;
滚动链
有这么一个场景，有一天你在浏览网页的时候，中间存在一个滚动区域的模块，当你滚动到模块底部时，继续滚动的时候，整个网页会继续滑动，在某些情况下我们其实不想要这些表现，可以使用overscroll-behavior来去除不需要的滚动链
scroll-snap-*
规范滚动元素的定位
这个属性是很有用的，可以用纯CSS来实现各种多屏滚动效果，到临界点的时候触发向上或者向下滚动，有点超出某一高度再滑动的感觉，
这里有一个点，当某一模块需要整体滑动时，即模块在屏幕中显示高度不足某一比例时，显示为上个模块，当达到某一比例，显示当前模块，也叫整屏滚动，可以利用当前css属性来实现，最后一个模块案例可以体验
滑动某一模块体验该属性
更多功能可以参考这篇
PracticalCSSScrollSnapping|CSS-Tricks
整屏滚动