大家好,我是 Just,这里是「设计师工作日常」,今天给大家写了一个丝滑回到顶部的按钮,原生js实现的,兼容性所有主流浏览器,可在vue中使用,适用于网页、h5等。
最新实例通过公众号「设计师工作日常」发布。
整体效果
场景:
适用于门户网站
、个人网站
的底部区域
,当滚动网站内容到一定高度时,显示“回到顶部”
按钮,然后用户点击按钮后,匀速回滚到网站顶部,提高网站用户体验
。
思路:
①获取滚动条滚动高度,根据滚动高度来判断是否显示其按钮;
②当鼠标悬浮或离开按钮上方时,进行文字以及图标的切换显示;
③点击按钮后滚动条匀速滚动到顶部区域。
原生js实现的一个丝滑回到顶部的按钮,兼容性所有主流浏览器,可在vue中使用。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
<div class="top-btn" type="button" onclick="backTop()">
<div class="btn-box-cont">
<div class="svg">
<svg fill="none" version="1.1" width="32" height="32" viewBox="0 0 32 32"><defs><clipPath id="master_svg0_188_3672"><rect x="0" y="0" width="32" height="32" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_188_3672)"><g><path d="M17.33310625,10.438066093749999L17.33310625,26.66679609375L14.66647625,26.66679609375L14.66647625,10.438066093749999L7.51453625,17.589996093750003L5.62890625,15.70439609375L15.99980625,5.33349609375L26.37070625,15.70439609375L24.48510625,17.589996093750003L17.33310625,10.438066093749999Z" fill="#000000" fill-opacity="1"/></g></g></svg>
</div>
<div class="text"