如何在HTML中制作一个“返回顶部”的浮动按钮

在许多网站中，我们经常会看到一个名为“返回顶部”的浮动按钮，它可以将我们带回页面顶部，而无需滚动到顶部。在本文中，我们将学习如何创建这样一个按钮，并将其嵌入到网站中。

HTML

我们需要在HTML代码中添加一个按钮，并将其链接到Javascript中。以下是我们的HTML中示例代码片段：

<a href="#" id="back-to-top-btn"></a>

此代码片段会创建一个锚链接，链接到界面顶部。请注意id属性，我们稍后需要用它来定义我们的CSS和Javascript。

CSS

在CSS中，我们将设置按钮的样式、位置以及动画效果。以下是我们的CSS示例代码片段：

#back-to-top-btn {
  display: inline-block;
  background: #333 url('path/to/arrow-icon.svg') no-repeat center center;
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s, visibility 0.4s, transform 0.4s;
  transform: scale(0.5);
  z-index: 9999;
}

#back-to-top-btn:hover {
  cursor: pointer;
}

#back-to-top-btn.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

我们在这里使用了一些CSS技巧来让按钮能够以漂浮的形式出现并且拥有吸引人的动画效果。请注意background属性的值，我们将使用它来设置按钮上的图标。我们还定义了按钮的大小、位置、动画效果和z-index值。

Javascript

在Javascript中，我们将为按钮添加一个侦听器，当用户点击按钮时，它将带我们回到界面顶部。以下是我们的Javascript示例代码片段：

var btn = document.getElementById('back-to-top-btn');

var scroll = document.documentElement.scrollTop || document.body.scrollTop;

if (scroll > 300) {
  btn.classList.add('active');
} else {
  btn.classList.remove('active');
}

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

我们在这里使用了两个变量来获取当前页面的滚动位置。如果当前滚动位置大于300像素，我们将给按钮添加active类，并将其激活。在单击按钮时，我们使用window.scrollTo()函数将页面滚动到顶部位置，并设置了平滑的动画效果。

现在，我们已经完成了创建一个漂浮的“返回顶部”按钮的全部步骤。将上述代码片段添加到您的网站中，您将获得一个很酷的悬浮按钮。