--- theme: scrolls-light --- ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0eda2de84464d8fad8e5a79444ca0c2~tplv-k3u1fbpfcp-watermark.image?) 前言：自己本身对css 涉足不深，所以对css的某些属性有时也说不清楚原理，可能有些属性都不知道，可能三年前你对这个功能很熟悉， top↑ （脑补。。。到顶部, enenen）此时你大脑是不是已经想到了好几种方法让我们看看都有哪些那个时候的我们处理这个，那是觉得相当的easy，而且还有好几种方案 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf146b4679554baf963116c76c13c406~tplv-k3u1fbpfcp-watermark.image?) // 第一种锚点（这个好像不是很常用，用个例场景）

回到顶部 // 第二种 scrollTop （较常见） // 第三种 scrollTo (常见) // 第四种 scrollBy (不常见，没用过黑脸ing) Window.scrollBy() - Web API 接口参考 | MDN // 第五种 scrollIntoView()

上面的方案里面，最常见的应该是第二种，直接将body.scrollTop = 0 ,这种是最直接，也是最干脆的，那时候的我们不注重交互体验，功能实现就是第一，老板来了都点赞... ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2b483639c22474aa59faed36baa871f~tplv-k3u1fbpfcp-watermark.image?) Ok,我们介绍今天的重点，如何，让滑动变得更加的丝滑，引入我这个菜鸟之前不知道的属性 > - Css: **scroll-behavior** （通过css属性来实现过渡） > - js：**behavior** （通过js来实现过渡） # [css] Scroll-behavior: smooth 这个属性可以放在某一个指定元素上，也可以放在body上，作用的对象是元素它会在你的元素有点击切换的行为时，增加滑动的动画，来增加用户扁平化的体验点击横向数字来体验 [jcode](https://code.juejin.cn/pen/7246714757523177506) 这个属性，不能设置时间限制，多少毫秒内完成动画效果 # [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 三种方法语法和原理相通，可通过参数配置来实现滑动的**过渡**效果 ```js 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' }); // 其他同理 ``` 案例： [jcode](https://code.juejin.cn/pen/7246973698408710204) # [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。 */ [jcode](https://code.juejin.cn/pen/7247394944325779467) # 小拓展： ### history.scrollRestoration > 设置返回页面是否返回原滚动位置在从页面跳转回来的时候，一般浏览器都会“贴心”地返回到该页面原来的滚动位置，该行为由 history.scrollRestoration 属性控制的，默认是“auto”，若不想回到原来的位置，可将值设为“manual”，手动，即不返回原位置，而是手动返回，此时浏览器会返回到页面顶部。但据测试，“返回”都是瞬间的，即使设置了 scroll-behavior: smooth 也无效 if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; } ### overscroll-behavior: contain; > 滚动链有这么一个场景，有一天你在浏览网页的时候，中间存在一个滚动区域的模块，当你滚动到模块底部时，继续滚动的时候，整个网页会继续滑动，在某些情况下我们其实不想要这些表现，可以使用 `overscroll-behavior` 来去除不需要的滚动链 ## scroll-snap-\* > 规范滚动元素的定位这个属性是很有用的，可以用纯CSS来实现各种多屏滚动效果，到临界点的时候触发向上或者向下滚动，有点超出某一高度再滑动的感觉， ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02e068d8cacb41c695c17f5d7a166143~tplv-k3u1fbpfcp-zoom-1.image) 这里有一个点，当某一模块需要整体滑动时，即模块在屏幕中显示高度不足某一比例时，显示为上个模块，当达到某一比例，显示当前模块，也叫整屏滚动，可以利用当前css属性来实现，最后一个模块案例可以体验滑动某一模块体验该属性 [jcode](https://code.juejin.cn/pen/7248513993914974240) 更多功能可以参考这篇 [Practical CSS Scroll Snapping | CSS-Tricks](https://css-tricks.com/practical-css-scroll-snapping/) [整屏滚动](https://juejin.cn/post/7247740398561443900)