先看个锚点定位的例子
创造页面唰的一些就到顶部了，快到我们懵逼了。。。
开始办理
CSS属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。
scroll-behavior:smooth 写在滚动容器元素上，可以让容器的滚动变得平滑。
在网页默认滚动是在<html>标签上，移动端大多数在<body>标签上。
我们可以这样加：
html, body { scroll-behavior:smooth; }
加了往后的效果如下：
这是录制的GIF图，效果没那么好。 大家可以动手试一下，滑动体验非常不错。
缺陷
兼容性不足好
当然我们可以通过js来做个类似
Element.scrollIntoView() 方法DOM元素的scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内，通过触发滚动容器的定位实现。
DOM元素的scrollIntoView()方法 是原生JS 兼容到IE6，兼容性非常好。
参数如下
{ behavior: \"大众auto\"大众 | \"大众instant\"大众 | \"大众smooth\"大众, // 默认 auto block: \公众start\公众 | \公众center\"大众 | \"大众end\公众 | \公众nearest\"大众, // 默认 center inline: \"大众start\公众 | \"大众center\"大众 | \"大众end\公众 | \"大众nearest\公众, // 默认 nearest}
阐明一下这三个参数：
behavior 表示滚动办法。auto 表示利用当前元素的 scroll-behavior 样式。instant 和 smooth 表示 直接滚到底 和 利用平滑滚动。block 表示块级元素排列方向要滚动到的位置。对付默认的 writing-mode: horizontal-tb 来说，便是竖直方向。start 表示将视口的顶部和元素顶部对齐；center 表示将视口的中间和元素的中间对齐；end 表示将视口的底部和元素底部对齐；nearest 表示就近对齐。inline 表示行内元素排列方向要滚动到的位置。对付默认的 writing-mode: horizontal-tb 来说，便是水平方向。其值与 block 类似。用法：
html:
<div class=\公众wrap\公众> <div onClick=\"大众onScrollIntoView()\"大众>点击让玄色块到顶部</div> <ul class=\公众body\"大众> <li>1</li> <li>2</li> <li id=\"大众box\"大众>我是玄色</li> <li>3</li> <li>4</li> </ul></div>
js:
function onScrollIntoView () { var element = document.getElementById(\公众box\"大众); element.scrollIntoView({behavior: \公众smooth\"大众});}
效果：
这回大家再也不用害怕做锚点定位啦。
末了我们在说一个关于页面滚动问题吧，那便是 返回顶部 功能实现
返回顶部 功能实现我们常用定时器 setInterval 来不断减去高度。
如：当前间隔顶部 1000， 我们每10毫秒减50，
var timer = setInterval(function() { // 定时器 每10毫秒实行一次 // 顶部间隔 document.body.scrollTop = 1000 var speed = 50 // 返回顶部速率 document.body.scrollTop = document.body.scrollTop - speed if (document.body.scrollTop === 0) { // 返回到达顶部后， 销毁定时器 clearInterval(timer) }}, 10)
效果：
大家会创造，页面返回是滚动起来很干。 没10毫秒减50. 很均匀，在交互上效果并不好。
借鉴上面 scroll-behavior:smooth 的交互效果。 缓动的返回顶部。
改一下打算办法：1000/2 = 500, 500/2 =250, 250/2 = ...... 这样滑动起来是不是就平滑了呢？
换算成公式：开始位置 = 开始位置 + (结束位置 - 开始位置) / 速率
document.body.scrollTop = 1000 + (0 - 1000) / 2
公式太烦了还是上代码吧：
var onTop = function (a, b, c, d) { if (a == b || typeof a != 'number') { return } b = b || 0 c = c || 2 var speed = function () { a = a + (b - b) / c if (a < 1) { d(b, true) return } d(a, false) requestAnimationFrame(speed) } speed()}a 开始位置b 结束位置c 速率d 位置回调，d(当前的位置值, 否动画结束)
调用：
var target = document.body.scrollTop ? document.body : document.documentElementonTop(target.scrollTop, 0, 4, function (value) { target.scrollTop = value})
效果：
Ps: gif录制效果不好，大家可以动手写一下DEMO
