当前位置: 首页 > Web前端 > HTML5

页面滚动回顶部的流畅效果

时间:2023-04-06 00:01:37 HTML5

小弟是菜鸟,记录一波页面滚动回顶部的流畅效果。如果有更好的实现方法,可以发起评论分享~1.实现页面滑到底部需要回滚到顶部的效果。使用窗口。并滚动到顶部。该方法是通过递归调用平滑滚动来实现的,其实也可以使用behavior:"smooth"来实现平滑滚动文档.正文。滚动顶部;抽屉位置-=10;如果(drawerPosition>0){window.scrollTo(0,drawerPosition);}else{window.scrollTo(0,0);清除间隔(计时器);定时器=空;}};vartimer=setInterval(gotoTop,1);}2.实现抽屉组件内容滑动到底部并回滚到顶部时的效果以实现抽屉组件的滚动。那么就必须先获取抽屉组件content中的元素了~~使用behavior:"smooth"属性就可以很流畅的滑动了。//js部分toTop(){constdrawerPositon=document.getElementById("drawer");drawerPositon.scrollIntoView({behavior:"smooth",block:"start",inline:"nearest"});}//html部分..我满足了....。..很多内容。..