一个完美的回到顶部按钮

设计师工作日常

已于 2024-05-14 10:56:05 修改

阅读量429

点赞数 6

分类专栏：实用案例组件文章标签： javascript 前端回到顶部交互设计 js

于 2024-05-14 10:30:09 首次发布

本文链接：https://blog.csdn.net/justliu1989/article/details/138843369

版权

本文介绍了如何使用原生JavaScript创建一个兼容所有主流浏览器的返回顶部按钮，该按钮在页面滚动到一定高度时显示，点击后平滑滚动到顶部。包括核心的HTML、CSS和JS代码，并提供了完整的实现过程和页面渲染效果。

摘要由CSDN通过智能技术生成

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