滚动事件，指的是拉动页面滚动条时触发的事件。滚动事件非常有用，特别是在“回顶部特效”以及“扁平化页面动画”中会大量用到。
在jQuery中，我们可以使用scroll()方法来表示滚动事件。
语法：
$().scroll(function(){
……
})
说明：
scroll事件经常配合scrollTop()方法一起使用的。其中，在“5.2 样式操作”这一节中我们已经详细介绍过scrollTop()方法了。
举例：固定栏目
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{height:1800px;}
#box1,#box2
{
display:inline-block;
width:100px;
height:100px;
}
#box1
{
background-color:Red;
}
#box2
{
background-color:Orange;
position:fixed;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
//获取box2距离顶部的距离
var top = $("#box2").offset().top;
//根据滚动距离判断定位
$(window).scroll(function () {
//当滚动条距离大于box2距离顶部的距离时，设置固定定位
if ($(this).scrollTop() > top) {
$("#box2").css({ "position": "fixed", "top": "0" });
}
//当滚动条距离小于box2距离顶部的距离时，设置相对定位
else {
$("#box2").css({ "position": "relative" });
}
});
})
</script>
</head>
<body>
<div id="box1"></div><br />
<div id="box2"></div>
</body>
</html>
浏览器预览效果如图所示。
分析：
当滚动条距离大于box2距离顶部的距离时，设置固定定位；当滚动条距离小于box2距离顶部的距离时，设置相对定位。
这个技巧非常好用，常用于固定某个栏目。绿叶学习网文章右侧的某个固定栏目就是用这种方法来实现的。
举例：回顶部特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body
{
height:1800px;
}
div
{
position:fixed;
right:50px;
bottom:50px;
display:none; /*设置默认情况下元素为隐藏状态*/
width:40px;
height:40px;
color:white;
background-color:#45B823;
font-family:微软雅黑;
font-size:15px;
font-weight:bold;
text-align:center;
cursor:pointer;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
/*根据滚动距离判断按钮是否显示或隐藏*/
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$("div").css("display", "inline-block");
}
else {
$("div").css("display", "none");
}
});
/*实现点击滚动回顶部*/
$("div").click(function () {
$("html,body").scrollTop(0);
});
})
</script>
</head>
<body>
<h3>绿叶，给你初恋般的感觉。</h3>
<div>回到顶部</div>
</body>
</html>
默认情况下，预览效果如图所示。
当我们拉动滚动条一段距离（如300px）后，此时预览效果如图所示。
分析：
当我们拉动滚动条一定距离后，【回到顶部】按钮就会出现。点击【回到顶部】按钮，我们会发现页面回到了顶部，此时按钮也会消失。
这就是最常见的回顶部特效。实现代码很简单，小伙伴们好好琢磨是怎么实现的。在学了后面“第8章 jQuery动画”后，我们再回顾一下，然后给回顶部特效添加动画效果。
