在 jQuery 中，我们可以使用 scrollTop() 方法来获取或设置元素相对于滚动条“顶边”的距离，也可以使用 scrollLeft() 方法来获取或设置元素相对于滚动条“左边”的距离。
语法：
在实际开发中，大多数情况下我们只会用到 scrollTop() 方法，极少用到 scrollLeft() 方法。因此对于 scrollLeft() 方法，简单了解一下即可。
举例：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <style type="text/css">
- body{height:1800px;}
- </style>
- <script src="js/jquery-1.12.4.min.js"></script>
- <script>
- $(function () {
- $(window).scroll(function(){
- var top = $(this).scrollTop();
- console.log("滚动距离："+ top + "px");
- });
- })
- </script>
- </head>
- <body>
- </body>
- </html>
当我们拖动滚动条时，控制台输出结果如图 1 所示。
分析
- $(window).scroll(function () {
- ……
- })
上面这段代码表示滚动事件，我们在后面还会详细介绍，这里不需要深入了解。获取滚动条的距离在各种特效（如回顶部效果）中用得非常多，我们在后续章节会慢慢介绍。
湘公网安备 43102202000103号
