js实现点击使页面到达指定位置（有动画）

首先做一个没有动画版的 ，相当于锚点定位，但是我用js来简单的实现一下

首先获取页面被卷曲的高度，也就是往上滑动时看不到的那部分内容

let bodyTop = document.body.scrollTop || document.documentElement.scrollTop;

（let 是es6语法，用var也行 。）

然后用window.scrollTo(0, bodyTop); 就轻松的实现了没有动画的定位   2行代码

下面来做一个有动画版的

除了获取到页面被卷曲高度外，我们还需要获取你希望到达的那个div的距离顶部的高度，也就是你想要定位到的地方

let divTop = document.getElementsByClassName("center")[0].offsetTop;

(通过class名来获取dom元素，当然你也可以通过id等获取元素)

下面说下思路：如果页面被卷曲高度为0，我要定位到某一个距离顶部为600高度的div上，

通过定时器，每次下降一个数值，这个数值随着高度的变化而变化，由大到小

例第一个时间下降200，第二个时间下降不是400而是360。。。。然后最后一个时间下降到600

这样数值由大到小，看到的下降效果就是由快到慢。当下降到600的时候，我们清除定时器。

如果说这个变量是a ，  bodyTop =  bodyTop + a  随着a的值在每个时间变小，top也就从0 刚开始急速下降到最后缓慢接近divTop

这只是一种情况（当定位元素在内容页下面），还有一种情况是定位元素在内容页上面：如点击回顶部。

同理，我们只需要把下降换成上升，数值一样由大到小，实现缓慢上升。bodyTop =  bodyTop - a

现在只需解决变量a的问题了。这个有很多方法，也可以用自己的想法。

当点击页面上升时候,说明 bodyTop > divTop,  那么a = （bodyTop - divTop）/ 10

同理当点击页面下降时候，a = （ divTop - bodyTop ）/ 10

废话不多说，直接上代码：

scrollAnimation(currentY, targetY) {        //currentY  当前滑动高度       targetY  目标滑动高度

    // 获取当前位置方法

    // const currentY = document.documentElement.scrollTop || document.body.scrollTop

    // 计算需要移动的距离

    let needScrollTop = targetY - currentY

    let _currentY = currentY

    setTimeout(() => {

        // 一次调用滑动帧数，每次调用会不一样

        const dist = Math.ceil(needScrollTop / 10)

        _currentY += dist

        window.scrollTo(_currentY, currentY)

        // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果

        if (needScrollTop > 10 || needScrollTop < -10) {

            this.scrollAnimation(_currentY, targetY)

        } else {

            window.scrollTo(_currentY, targetY)

        }

    }, 1)

}