详解3种方法完成光滑翻转网页页面到顶部的作用

情况

近期开发设计企业的群众号H5，做了1个点一下icon翻转到顶部的作用。完成作用较为简易，立即启用window.scrollTo(0, 0)，1行编码进行。可是做为1个攻城狮，如何将会对自身规定这么低，因此我给自身加了个要求，完成 光滑翻转网页页面到顶部 的作用。历经调查和查询文本文档，有了下列3种计划方案。

1.应用CSS

进行作用的真谛，只用CSS就搞定。编码以下：

html {
    scroll-behavior: smooth;
}

该款式的功效是为有翻转条的元素特定1个翻转的个人行为，可是仅有在当客户手动式导航栏或 CSSOM scrolling API开启翻转的情况下起效，不危害客户个人行为造成的翻转。就在我庆祝的情况下，开启can i use看了下适配性：

日了狗，還是老老实巴交好用JS完成吧。

2.应用Window.scrollTo API

大家都了解window.scrollTo(x, y)，根据传入文本文档中的x，y轴座标来完成翻转到网页页面某个部位的作用。这个API实际上还能够传入1个option，是1个目标，left值对应座标中的x，top对应座标中的y，也有1个值为behavior，可让你自定翻转个人行为，随后大家这样来完成翻转到顶部:

window.scrollTo({
    left: 0,
    top: 0,
    behavior: 'smooth'
})

真香，搞定。过了几日，商品主管扛着5米大刀来找我，说在Safari上翻转实际效果怪异，体检极差。因而我默默开启了MDN文本文档，翻转究竟部：

看到了这张图，尽管API访问器都基本上适用，可是option选项在Safari上立即挂掉，因而我又开启了stackoverflow，总结了终极计划方案。

3.应用requestAnimationFrame

常常能看到名字鼎鼎的requestAnimationFrame，可是没机遇用上，这次能够尝尝鲜了。大家了解requestAnimationFrame的功效便是告知访问器在下一次重绘以前实行传入的回调函数涵数，这个个人行为是访问器全自动帮你做的。因而有了以下编码:

const scrollToTop = () => {
    let scrollTop = document.documentElement.scrollTo || document.body.scrollTop
    if (scrollTop > 0) {
        window.requestAnimationFrame(scrollTop)
        window.scrollTop(0, scrollTop - scrollTo / 8)
    }
}

Done！！！Perfect！！！雀跃的另外，我還是开启了can i use查询了requestAnimationFrame的适配性：

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。