jquery 获取scrollTop

原创

mob649e8163f390 2023-11-16 10:47:08 ©著作权

文章标签 jQuery javascript 代码示例 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8163f390的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 获取scrollTop

简介

在网页开发中，我们经常会遇到需要获取到页面滚动的高度（scrollTop）的情况。而使用jQuery可以方便地实现这一功能。本文将介绍如何使用jQuery获取scrollTop，并提供相应的代码示例。

获取scrollTop的方法

方法一：使用`scrollTop()`方法

jQuery提供了一个scrollTop()方法，可以用于获取或设置滚动条相对于其顶部的偏移。

let scrollTop = $(window).scrollTop();
console.log(scrollTop);

上述代码中，$(window)表示窗口对象，scrollTop()方法在该对象上被调用，返回滚动条相对于窗口顶部的偏移。通过将返回值赋给变量scrollTop，我们可以在控制台输出滚动条的位置。

方法二：使用`scrollTop`属性

除了使用scrollTop()方法，还可以直接访问scrollTop属性来获取滚动条的位置。

let scrollTop = $(window)[0].scrollTop;
console.log(scrollTop);

上述代码中，$(window)[0]表示获取窗口对象的DOM元素。通过访问该DOM元素的scrollTop属性，我们可以获取滚动条的位置。

示例与应用

下面的示例将展示如何使用jQuery获取scrollTop，并应用到一个动态效果中。

<!DOCTYPE html>
<html>
<head>
  <title>获取scrollTop示例</title>
  <style>
    .scroll-effect {
      width: 200px;
      height: 200px;
      overflow: auto;
      padding: 10px;
      border: 1px solid #ccc;
    }
    .scroll-content {
      width: 400px;
      height: 400px;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <div class="scroll-effect">
    <div class="scroll-content"></div>
  </div>

  <script src="
  <script>
    $(document).ready(function() {
      // 监听滚动事件
      $(window).scroll(function() {
        let scrollTop = $(window).scrollTop();
        console.log(scrollTop);

        // 根据scrollTop的值进行相应的动画效果
        let scrollEffect = $('.scroll-effect');
        if (scrollTop > 100) {
          scrollEffect.addClass('active');
        } else {
          scrollEffect.removeClass('active');
        }
      });
    });
  </script>
</body>
</html>

在上述代码中，我们创建了一个带有滚动效果的容器。当页面滚动时，通过监听scroll事件，我们可以获取到滚动条的位置，并根据位置的变化添加或移除一个active类。通过CSS样式，可以为.scroll-effect容器添加一些动画效果。

流程图

下面是一个使用mermaid语法绘制的流程图，展示了获取scrollTop的流程。

flowchart TD
  A(开始)
  B(监听滚动事件)
  C(获取scrollTop)
  D(判断scrollTop的值)
  E(根据值进行相应操作)
  F(结束)
  A --> B
  B --> C
  C --> D
  D --> E
  E --> B
  D --> F