您现在的位置:主页 > 9426黄大仙开奖结果 >

返回顶部的几种实现

发布日期:2019-10-04 22:05   来源:未知   阅读:

  返回顶部的按钮大家并不陌生,针对长滚动条的信息流页面添加返回顶部的按钮可以给用户良好的体验,而返回顶部的实现也是多种多样,本文分享几个案例并给出评价

  作为引子讲一个常用的案例,对与不知道的作为一个小彩蛋吧!对于微博与微信朋友圈的返回顶部可以双击最顶部的区域(包含时间,网络,电量)来返回顶部

  对于追求极简的方式达到预期效果的人可能会喜欢这种方式,不托泥带水也不用考虑兼容问题

  不难发现此类的大站为了兼容性与浏览器渲染速度选择了直接跳转的方式,实现基本含两种方式

  上面代码包含了所有的描述,简单易懂,下面说下优先级,这个是关键,避免无意中犯了错误却无从下手

  不建议大家用默认的方式,具体有兼容问题和优先级低的问题,id 与 name 均可,但要注意命名冲突

  这里方便展示,实际不建议在标签内使用 js,可以调用一个方法,简单易懂。

  注意优化网页资源,使用不当会非常卡顿,可以通过调节 setTimeout 的第二个参数来控制滚动速度(回调时间单位 ms),下面解释声明sTop 变量的写法

  完整的文档看MDNJavaScript 标准参考教程(alpha),里面有详细描述和兼容性详情

  看过文档发现 requestAnimationFrame 适合用于连续的动画,而我们的需求与连续动画关系大吗?我们不妨一试。

  上面代码为什么定义 move 与 span 这里是方便计算速度,粘贴代码运行你会发现滚动的距离越大速度就会越快,反而会越慢

  这种用法本质上可以使动画更加流畅,但是重点在于页面优化,requestAnimationFrame是在主线程上完成。这意味着,如果主线程非常繁忙,requestAnimationFrame的动画效果会大打折扣。

  目前的前端把焦点从 jQuery 移到了 MVVM 框架,不论如何当初的 jQuery 对于 DOM 操作与低版本浏览器兼容贡献巨大。如果你即考虑兼容性又想要流畅的动画可以继续使用 jQuery。

  这里初始状态的返回顶部为不可见,通过判断页面滚动高度切换显示隐藏,hover 的样式可以自己设计。

  总结了几种返回顶部的方式,orange 认为滚动或跳转对用户体验并没有影响(影响用户体验的是有没有返回顶部的按钮),既然选择了返回顶部的按钮那么性能一定是第一位的,一味追求滚动动画导致页面滚动过程中卡顿进而影响了整个网页的用户体验,在这个细节上负面的例子太多不一一列举。

  总之本文的用意除了阐述各个方法的用法外还想提醒大家在前端开发中细节才是致命的,orange 也一直在踩坑,说到聪明的大厂为什么选用跳转,哈哈,先回去看看负面教材给我们的教训就知道了,技术点不在于滚动,而在于整个网页的优化,如果你的网站优化的足够好,那么拿滚动来炫技没人会反对。

  赞赏支持如果觉得我的文章对你有用,请随意赞赏你可能感兴趣的评论载入中...显示更多评论发布评论广告位促销,月曝光三千万,10 元/天推广链接目录×Close分享

  每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。香港白小姐马报资料www.722666.com