scrollIntoView动画效果
版权声明：我写的你不能转载，但是你可以复制啊。复制记得加关注啊（迷之微笑）。    blog.csdn/quhongqiang/article/details/84664285    </di v>
<link rel="stylesheet" href="csdnimg/release/phoenix/template/css/ck_htmledit_views-d7e2a68c7c.css">
<div class="htmledit_views" id="content_views">
<p>经常有这样的需求：点击⼀个链接（内链）跳转到当前页⾯中间某个部分。对于这样的需求，很容易想到使⽤锚点实现。但有⼀个问题：滚动，太过⽣硬了，体验极差。</p>
我还是⽐较喜欢平滑滚动。HTML5 中提供了 CSS 属性 scroll-behavior 并且修改了⼀系列滚动函数的可接受参数⽤于⽀持平滑滚动特性。
html滚动效果代码这个 CSS 属性就只接受两个⾃定义值：auto 和 smooth。默认值为 auto，表⽰⽴刻滚到底；smooth 即表⽰平滑滚动。这个属性会影响滚动函数 scrollTo、scrollIntoView 等的默认滚动⾏为，也会影响 scrollTop、scrollLeft 等 DOM 属性改变时的滚动⾏为。如果 scroll-behavior 被设置在根元素（<html>）上，表⽰应⽤在视⼝（viewport）上。这时对锚点、内链触发的视⼝滚动同样有效。
所以只需要给 html 元素设置样式 scroll-behavior: smooth 点击内链就会触发页⾯的平滑滚动，很简单。
上⾯说到：scroll-behavior 是指定滚动函数的默认⾏为，这其中就包括 scrollIntoView。顾名思义：这个函数就是把某个元素滚动到窗⼝的可见区域。
它接受两种形式的值：布尔值或对象。接受布尔值主要还是为了兼容不⽀持平滑滚动（⽼版）的浏览器。我们这⾥只说对象值。
1.
{
2.
behavior:
"auto" |
"instant" |
"smooth",
// 默认 auto
3.
block:
"start" |
"center" |
"end" |
"nearest",
// 默认 center
4.
inline:
"start" |
"center" |
"end" |
"nearest",
// 默认 nearest
5.
}
对象可以有三个参数。
1. behavior 表⽰滚动⽅式。auto 表⽰使⽤当前元素的 scroll-behavior 样式。instant 和 smooth 表⽰ 直接滚到底 和 使⽤平滑滚动。
2. block 表⽰块级元素排列⽅向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说，就是竖直⽅向。start 表⽰将视⼝的顶部
和元素顶部对齐；center 表⽰将视⼝的中间和元素的中间对齐；end 表⽰将视⼝的底部和元素底部对齐；nearest 表⽰就近对齐。
3. inline 表⽰⾏内元素排列⽅向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说，就是⽔平⽅向。其值与 block 类似。
可惜的是，⽬前。⽽ scroll-behavior 作为⼀个 CSS 属性，不能被 polyfill。scrollIntoView 作为⼀个 JavaScript 函数对 polyfill 很友好。在⽬前的情况下，推荐使⽤ scrollIntoView 加  的⽅式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。