返回顶部的几种实现
时间：2023-04-02 16:01:47
HTML
返回顶部按钮大家并不陌生。在长滚动条的信息流页面中加入返回顶部按钮，可以给用户带来很好的体验，返回顶部的实现有很多种。本文分享的几个案例和评论作为一个常用案例的介绍，说对了还不知道的小伙伴们可以当个小彩蛋！微博和微信朋友圈返回顶部，可以双击最顶部区域（包括时间、网络、电量）返回顶部。你见过哪些创意重回巅峰？欢迎留言交流。输入文字直接跳转到下方文字的方式可能会被追求极简方式达到预期效果的人喜欢。无需担心兼容性问题。新浪首页、淘宝网、京东、百度新闻等国内大型网站不难发现，这类大型网站出于兼容性和浏览器渲染速度的考虑，都选择了直接跳转的方式。基本上有两种命名锚跳的方法。锚点#top(variable)返回页面顶部预设id为top(variable)的top元素，或者a标签名称属性值为top(variable)。新版浏览器（chrome等）默认支持#top锚点返回top不需要上述条件，但前面条件的优先级大于默认跳转。上面说的有点乱。让我逐句解释。如果看得懂，看懂了，可以直接看下一节。返回顶部top
上面的代码包含了所有的描述，简单易懂，下面说说优先级，这个是关键，避免无意出错却无法启动注意：id>name>Default不建议大家使用default的方式，有具体的兼容性问题和优先级低的问题，id和name都可以，但要注意命名冲突。scroll函数跳转到window.scroll(x,y)方法，其中x为水平滚动位置，y为垂直滚动位置。两个参数都必须给定，否则会报错。你可能会发现有window.scrollY。在这里，只有垂直滚动发生了变化。为什么不能用？一方面，它返回的不是函数，不能传递参数；另一方面，它不能赋值返回顶部这里显示方便。不建议在标签中使用js。可以调用一个方法，简单易懂。setTimeout模拟滚动动画。递归调用setTimeout()方法改变滚动条从顶部开始的位置文档元素。scrollTop+document.body.scrollTopif(sTop===0){clearTimeout(scrolldelay)}}注意优化网页资源，使用不当会很卡，可以通过调整setTimeout的第二个参数来控制滚动速度（callbacktime单位为ms），下面说明如何声明sTop变量来获取scrollTop的值。声明DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop，因为两者只有一个会生效，另一个永远为0。所以取sum值可以得到真正的scrollTop网页值注意：非标准版本（webkit内核）使用document.body.scrollTopwindow.requestAnimationFramewindow.requestAnimationFrame()这个方法用于在页面重绘前通知浏览器调用一个指定的函数来满足需要开发人员操纵动画。这个方法接受一个函数作为参数，它会在重绘之前被调用。有关完整文档，请参阅MDN和JavaScript标准参考教程（alpha），其中包含详细说明和兼容性详细信息。看了文档，发现requestAnimationFrame适合做连续动画，我们的需求跟连续动画有多大关系？我们不妨试试看。constisWebkit=navigator.userAgent.toLowerCase().match(/webkit\/([\d.]+)/)constrequestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFramefunctionbackTomefunction(){letmove=window.scrollYletspan=move/15functionstep(){if(document.documentElement.scrollTop+document.body.scrollTop>0){if(isWebkit){文档。身体。scrollTop-=300}else{document.documentElement.scrollTop-=300}requestAnimationFrame(step)}else{return}}requestAnimationFrame(step)}为什么上面的代码定义了move和span？这样便于计算速度。贴上代码运行一下，你会发现滚动距离越大，速度越快，反之越慢。这种用法本质上可以让动画更流畅，但是重点在于页面优化，requestAnimationFrame是在主线程上完成的。这意味着如果主线程很忙，requestAnimationFrame的动画效果会大打折扣。借助jQuery目前的前端，重心已经从jQuery转移到了MVVM框架上。不管怎样，最初的jQuery在DOM操作和对低版本浏览器的兼容方面做出了很多贡献。如果考虑兼容性，想要流畅的动画，可以继续使用jQuery。functionbackTop(minHeight){varbackTopHtml='返回顶部 '$('#page').append(backTopHtml)$('#backTopBtn').click(function(){$('html,body').animate({scrollTop:0},700)}).hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')})最小高度？minHeight=minHeight:minHeight=600$(window).scroll(function(){vars=$(window).scrollTop()if(s>minHeight){$('#backTopBtn').fadeIn(100)}else{$('#backTopBtn').fadeOut(100)}})}backTop()这里返回顶部的初始状态是不可见的，页面滚动高度切换为显示和隐藏。hover的样式可以自己设计。总结了几种返回顶部的方法。Orange认为滚动或者跳转对用户体验没有影响（影响用户体验的是有没有返回顶部的按钮）。既然选择了返回顶部的按钮，那么性能肯定是第一位的，一味追求滚动动画导致页面滚动时卡顿，影响整个网页的用户体验。这个细节的反面例子太多了，就不一一列举了。总之，这篇文章的目的不只是讲解每个方法的用法，而是提醒大家前端开发中细节是致命的。橘子一直在踩坑。说到为什么精明的厂商会选择跳槽，哈哈，先回头看看底片。我们知道课本上的教训。技术点不在滚动，而在整个网页的优化。如果您的网站优化得足够好，没有人会反对使用滚动来炫耀您的技能。文章来自orange的个人博客http://orangexc.xyz/
