当前位置：首页 > Web前端 > CSS

完美实现一个“回到顶部”

时间：2023-03-31 11:56:47 CSS

前言在实际应用中，常用于滚动到页面顶部或滚动到某个位置。一般都是简单的用锚点处理或者用js设置document.body.scrollTop为0，结果是页面瞬间滚动到指定位置，不是特别友好。我们想要的效果是有点缓冲的效果。现代浏览器纷纷意识到了这一需求。scrollIntoView表示滚动查看，css提供了scroll-behavior属性，js有Element.scrollIntoView()方法。scroll-behavior滚动行为属性可以取值auto|smooth|inherit|unsetscroll-behavior:smooth;这就是我们想要的缓冲效果。在PC浏览器中，页面默认的滚动是在标签上，移动端大部分是在标签上。如果我们想要实现平滑的“回到顶部”，只需要在上面这两个标签上加上：容器（不是由鼠标手势触发）平滑，不限于、标签。使用这个css属性可以直接将原来的纯css标签一步切换成平滑过渡的切换效果。.tab标签{填充：10px；边框：1px实心#ccc；右边距：-1px；文本对齐：居中；向左飘浮;溢出：隐藏；}.tab::after{内容：“”；桌子;清除：两者；}.box{高度：200px；边框：1px实心#ccc；滚动行为：平滑；溢出：隐藏；margin-top:10px;}.item{height:100%;溢出：隐藏；}.item输入{位置：绝对；顶部：0；高度：100%；宽度：1px；边界：0；填充：0；保证金：0；clip:rect(0000);

纯CSStab

tab1tab2for="tab3">Tab3

选项卡1内容

选项卡2内容

<inputtype="text"id="tab3">

Tab3内容

也可以戳这里查看css属性scroll-behavior在各个方面的支持情况在大型浏览器中不是很好。当然，如果能套用这么一行css代码就最好了。否则，它将退化为闪光效果。Element.scrollIntoView()Element.scrollIntoView()方法将当前元素滚动到浏览器窗口的可视区域。元素.scrollIntoView();//等同于element.scrollIntoView(true)element.scrollIntoView(alignToTop);//布尔参数element.scrollIntoView(scrollIntoViewOptions);//对象参数参数alignToTop一个布尔值：如果为true，元素的顶部将与放置它的滚动区域的可见区域的顶部对齐。对应的scrollIntoViewOptions:{block:"start",inline:"nearest"}。这是此参数的默认值。如果为false，则元素的底部将与其所在的滚动区域的可见区域底部对齐。对应的scrollIntoViewOptions:{block:"end",inline:"nearest"}。参数scrollIntoViewOptions是一个带有选项的对象：{behavior:"auto"|“即时”|“平滑”，块：“开始”|"end",}behavior可选地定义缓动动画、"auto"、"instant"或"smooth"之一。默认为“自动”。块可以是“开始”、“中心”、“结束”或“最近”之一。默认为“中心”。inline可以是“start”、“center”、“end”或“nearest”之一。默认为“最近”。BrowserSupport可以看到对于没有参数的情况的支持还是很好的。带参数的API在浏览器中支持不是很好。我们可以结合CSS来设置scroll-behavior:smooth;滚动效果，在执行滚动时使用target.scrollIntoView()，可以达到“完美滚动”（不完美）的效果。向后兼容要在所有浏览器中达到相同（相似）的效果，就需要找出其余不支持scroll-behavior属性的浏览器，使用js来完成使命。判断是否支持scroll-behavior属性很简单。使用下面这行代码if(typeofwindow.getComputedStyle(document.body).scrollBehavior==='undefined'){//兼容js代码}else{//原生滚动api//Element.scrollIntoView()}来判断是否支持scroll-behavior属性，直接使用原生的Element.scrollIntoView()进行滚动，否则向下兼容。缓冲算法缓冲的直观效果是越来越慢，直到停止，即同一时间内移动的距离越来越短。这样，可以设置一个定时器，移动到当前点到目标点的距离的缓冲速率（比如1/2，1/3，...）。比如设置bufferrate为2，当前到目标点的距离是64px，下一秒是32px，然后是16px，8px...，到某个阈值结束，即：var位置=位置+（目的地-位置）/n；让我们简单地实现点击右下角的“返回顶部”按钮，页面轻松滚动到顶部演示。

很多内容。..

....content{高度：3000px；边框：1px实心#ccc；box-shadow:002pxsolid;}.back-to-top{width:18px;填充：10px；边框：1px实心#ccc；框阴影：002px#333；back-to-top:hover{cursor:pointer;}varscrollTopSmooth=function(position){//不存在的原始`requestAnimationFrame`，用于`setTimeout`替代if(!window.requestAnimationFrame){window.requestAnimationFrame=function(cb){返回setTimeout(cb,17);};}//当前高度varscrollTop=document.documentElement.scrollTop||文档.body.scrollTop;//步骤varstep=function(){vardistance=position-scrollTop;scrollTop=scrollTop+距离/5;如果(Math.abs(distance)<1){window.scrollTo(0,position);}else{window.scrollTo(0,scrollTop);;步（）;}$backToTop=document.querySelector('.back-to-top')$backToTop.addEventListener('click',function(){scrollTopSmooth(0);},false);效果图或点此进行简单封装上面的小demo中，缓冲算法与当前滚动业务代码耦合，下面拆解单个功能/***bufferfunction*@param{Number}position当前滚动位置*@param{Number}destination目标位置*@param{Number}rateeasingrate*@param{Function}callback缓动结束回调函数的两个参数分别当前位置和是否结束*/vareaseout=function(position,destination,rate,callback){if(position===destination||typeofdestination!=='number'){returnfalse;}目的地=目的地||0;率=率||2;//没有原生的`requestAnimationFrame`，使用`setTimeout`来模拟if(!window.requestAnimationFrame){window.requestAnimationFrame=function(fn){returnsetTimeout(fn,17);}}varstep=function(){position=position+(destination-position)/rate;if(Math.abs(destination-position)<1){callback(destination,true);返回;}回调（位置，假）；requestAnimationFrame（步骤）；};step();}拆分后，这个小缓冲算法可以重复调用，适用于滚动到指定位置（不仅仅是到顶部）和缓冲率（控制滚动速度），当前小demo调用：varscrollTopSmooth=function(position){//当前滚动高度varscrollTop=document.documentElment.scrollTop||文档.body.scrollTop;easeout(scrollTop,position,5,function(val){window.scrollTo(0,val);});}$backToTop=document.querySelector('.back-to-top')$backToTop.addEventListener('点击',函数(){scrollTopSmooth(200);},false);总之，实现一个完美的卷轴很简单。注意下面的、标签可以加上scroll-behavior:smooth;属性;判断当前浏览器是否支持scrollBehavior属性；如果它直接支持原生滚动apiElement.scrollIntoView()；不行就用js的小缓冲区算法处理一下~

上一篇：前端面试题1（HTML篇）

下一篇：沪江前端H5页面引发的一场前端数据结构讨论

完美实现一个“回到顶部”相关文章

最新推荐

猜你喜欢