大家好，我是 Just，这里是「设计师工作日常」，今天给大家写了一个丝滑回到顶部的按钮，原生js实现的，兼容性所有主流浏览器，可在vue中使用，适用于网页、h5等。
最新实例通过公众号「设计师工作日常」发布。
目录
- 整体效果
- 核心代码
-
- html 代码
- css 部分代码
- js 部分代码
- 完整代码如下
-
- 页面渲染效果
整体效果
场景：
适用于门户网站、个人网站的底部区域，当滚动网站内容到一定高度时，显示“回到顶部”按钮，然后用户点击按钮后，匀速回滚到网站顶部，提高网站用户体验。
思路：
①获取滚动条滚动高度，根据滚动高度来判断是否显示其按钮；
②当鼠标悬浮或离开按钮上方时，进行文字以及图标的切换显示；
③点击按钮后滚动条匀速滚动到顶部区域。
原生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>
