滚动顶部并添加类 (1)

📌 相关文章

📜 滚动顶部并添加类 (1)

📅 最后修改于: 2023-12-03 14:56:10.255000 🧑 作者: Mango

滚动顶部并添加类

在前端开发中，我们可能需要实现一个滚动到页面顶部的功能，并且在滚动时添加一些特定的类名，以实现一些交互效果。本文介绍如何使用 jQuery 实现此功能。

方案

实现滚动到页面顶部的功能，一般可以通过以下两种方案实现：

使用 JavaScript 监听页面滚动事件，当滚动位置超过一定值时，显示“回到顶部”按钮，并绑定点击事件使页面回到顶部。
使用 CSS3 的 position: fixed 和 right、bottom 控制按钮位置，通过 JavaScript 给按钮绑定点击事件，使页面回到顶部。

在这篇文章中，我们将采用方案二。

实现

对于方案二，示例代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>滚动顶部并添加类</title>
  <style>
    /* 按钮样式 */
    .back-to-top {
      position: fixed;
      right: 20px;
      bottom: 20px;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 模拟内容 -->
  <div style="height: 3000px">
    <p>模拟内容</p>
  </div>
  <!-- 回到顶部按钮 -->
  <a href="javascript:;" class="back-to-top">回到顶部</a>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      // 监听滚动事件
      $(window).scroll(function () {
        // 获取页面滚动高度
        var scrollTop = $(this).scrollTop();
        // 判断是否显示回到顶部按钮
        if (scrollTop > 300) {
          $('.back-to-top').fadeIn();
        } else {
          $('.back-to-top').fadeOut();
        }
        // 添加类名
        $('body').toggleClass('scrolling', scrollTop > 0);
      });
      // 绑定点击事件
      $('.back-to-top').click(function () {
        $('html, body').animate({scrollTop: 0}, 300);
        return false;
      });
    });
  </script>
</body>
</html>

我们在 HTML 中添加了一个“回到顶部”按钮，并且使用 CSS3 的 position: fixed 和 right、bottom 控制其位置。在 JavaScript 中，我们监听了页面的滚动事件，判断是否显示“回到顶部”按钮，并在滚动时给 <body> 添加或移除 scrolling 类名，以实现一些交互效果。当用户点击“回到顶部”按钮时，我们使用 jQuery 的 animate 方法实现平滑回到页面顶部的效果。

总结

上述代码演示了如何使用 jQuery 实现滚动到页面顶部的功能，并在滚动时添加类名。这个示例仅仅是一个简单的示例，你可以根据自己的需求对其进行扩展和优化。