全国服务热线:4008-888-888

技术知识

详解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的适配性:

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



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服