一个完美的回到顶部按钮

本文主要是介绍一个完美的回到顶部按钮，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

大家好，我是 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>