js+css实现回到顶部按钮（back to top）

实现回到顶部按钮（back to top）的方法有很多种，其中一种使用js+css来实现。以下是实现该功能的详细步骤：

第一步：创建HTML结构

首先我们需要在HTML中创建一个按钮元素，并给它一个ID，例如：

<button id="back-to-top">返回顶部</button>

第二步：添加CSS样式

接下来，我们需要为按钮添加一些基本的CSS样式来控制它的位置、大小、样式等。例如：

#back-to-top {
  position: fixed;   /* 固定在页面右下角位置 */
  bottom: 20px;
  right: 20px;
  display: none;     /* 初始不显示 */
  cursor: pointer;   /* 鼠标悬停时显示手型 */
}

第三步：编写JavaScript

在JavaScript中，我们需要为按钮添加一个点击事件，当点击按钮时，页面会自动滚动回到顶部。我们可以使用以下代码实现：

var topBtn = document.getElementById('back-to-top');
window.onscroll = function() {  // 监听窗口滚动事件
  if (document.documentElement.scrollTop > 200) {  // 当滚动距离超过200px时显示按钮
    topBtn.style.display = 'block';
  } else {
    topBtn.style.display = 'none';  // 否则隐藏按钮
  }
}
topBtn.onclick = function() {  // 点击按钮时回到顶部
  document.documentElement.scrollTop = 0;
}

代码解析：

首先，我们使用document.getElementById方法获取到按钮元素，并将其赋值给topBtn变量。
然后，我们监听窗口的滚动事件，当滚动距离超过200px时，显示按钮；否则，隐藏按钮。
最后，当按钮被点击时，使用document.documentElement.scrollTop方法将窗口滚动到页面的顶部。

示例1

以下是一个完整的示例，包括HTML、CSS和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Back to top</title>
  <style>
    #back-to-top {
      position: fixed;   /* 固定在页面右下角位置 */
      bottom: 20px;
      right: 20px;
      display: none;     /* 初始不显示 */
      cursor: pointer;   /* 鼠标悬停时显示手型 */
    }
  </style>
</head>
<body>
  <div style="height: 1000px;"></div>  <!-- 确保页面有滚动条 -->
  <button id="back-to-top">返回顶部</button>
  <script>
    var topBtn = document.getElementById('back-to-top');
    window.onscroll = function() {  // 监听窗口滚动事件
      if (document.documentElement.scrollTop > 200) {  // 当滚动距离超过200px时显示按钮
        topBtn.style.display = 'block';
      } else {
        topBtn.style.display = 'none';  // 否则隐藏按钮
      }
    }
    topBtn.onclick = function() {  // 点击按钮时回到顶部
      document.documentElement.scrollTop = 0;
    }
  </script>
</body>
</html>

运行该页面后，当页面被滚动超过200px时，将在页面右下角显示一个返回顶部按钮。

示例2

我们还可以使用jQuery来实现相同的效果。以下是使用jQuery的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Back to top</title>
  <style>
    #back-to-top {
      position: fixed;   /* 固定在页面右下角位置 */
      bottom: 20px;
      right: 20px;
      display: none;     /* 初始不显示 */
      cursor: pointer;   /* 鼠标悬停时显示手型 */
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      var topBtn = $('#back-to-top');
      $(window).scroll(function() {  // 监听窗口滚动事件
        if ($(window).scrollTop() > 200) {  // 当滚动距离超过200px时显示按钮
          topBtn.show();
        } else {
          topBtn.hide();  // 否则隐藏按钮
        }
      });
      topBtn.click(function() {  // 点击按钮时回到顶部
        $('html, body').animate({scrollTop: 0}, 500);
      });
    });
  </script>
</head>
<body>
  <div style="height: 1000px;"></div>  <!-- 确保页面有滚动条 -->
  <button id="back-to-top">返回顶部</button>
</body>
</html>

与示例1相比，我们引入了jQuery库，并使用$(document).ready(function(){ })方法来确保页面DOM元素加载完成后再执行代码。其他部分与示例1的代码基本一致，只是使用了jQuery的语法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js+css实现回到顶部按钮（back to top） - Python技术站

js+css实现回到顶部按钮（back to top）

第一步：创建HTML结构

第二步：添加CSS样式

第三步：编写JavaScript

示例1

示例2

相关文章