html悬浮按钮返回顶部

要实现HTML悬浮按钮返回顶部的效果，你可以按照以下步骤进行操作。

首先，在HTML中添加两个div元素，一个用于显示顶部内容，另一个用于显示返回顶部按钮。为它们设置相应的class名和内容。

然后，在CSS中设置这两个元素的样式。对于顶部内容，可以设置宽度为100%，高度为80px，使用flex布局居中对齐文字，设置背景颜色和过渡效果，并将其定位为固定位置，初始时显示在页面顶部之外。

对于返回顶部按钮，可以设置宽度为50px，高度为50px，设置背景颜色和字体样式，并将其定位为固定位置，在页面底部右下角，默认隐藏。

接下来，在JavaScript中添加逻辑代码。使用滚动事件来判断浏览器卷去的高度是否大于等于一个临界点（比如300px），如果是，则设置顶部内容显示出来，返回顶部按钮显示出来；如果不是，则设置顶部内容隐藏，返回顶部按钮隐藏。

最后，在JavaScript中添加点击事件监听，当点击返回顶部按钮时，使用动画效果将页面滚动到顶部位置。

具体的代码实现可以参考以下示例代码。请注意，示例代码中的一些具体细节可能需要根据实际情况进行调整。

HTML代码：

<div class="header">顶部</div>
<div class="goTop">回到顶部</div>

CSS代码：

.header {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #fff;
  background-color: rgb(86, 226, 180);
  transition: top 0.5s linear;
  overflow: hidden;
  position: fixed;
  top: -80px;
  left: 0;
}

.goTop {
  width: 50px;
  height: 50px;
  background-color: pink;
  font-size: 20px;
  text-align: center;
  line-height: 25px;
  color: #fff;
  position: fixed;
  bottom: 50px;
  right: 50px;
  display: none; /* 默认隐藏 */
}

JavaScript代码：

document.addEventListener('DOMContentLoaded', function() {
  var header = document.querySelector('.header');
  var goTop = document.querySelector('.goTop');

  window.addEventListener('scroll', function() {
    var height = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

    if (height >= 300) {
      header.style.top = '0px';
      goTop.style.display = 'block';
    } else {
      header.style.top = '-80px';
      goTop.style.display = 'none';
    }
  });

  goTop.addEventListener('click', function() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
});

通过以上的HTML、CSS和JavaScript代码，你可以实现一个HTML悬浮按钮返回顶部的效果。