滾動事件，指的是當滾動條位置發生改變時觸發的事件。滾動事件very very有用，在“回頂部特效”以及現在扁平化網頁中的動畫中大量涉及到，當然我們 學習網也不例外。
語法：
$().scroll(fn)
說明：
參數fn表示事件處理函數，也就是function(){}。
scroll()滾動事件常常和scrollTop()和scrollLeft()這兩個方法結合使用。在之前的章節，我們已經給大家詳細講解過scrollTop()和scrollLeft()這兩個方法了。
舉例：固定欄目
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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 type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
height:1800px;
}
#back-to-top
{
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 type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
/*根據滾動距離判斷按鈕是否顯示或隱藏*/
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$("#back-to-top").css("display","inline-block");
}
else {
$("#back-to-top").css("display","none");
}
});
/*實現點擊滾動回頂部*/
$("#back-to-top").click(function () {
$("html,body").scrollTop(0);
});
})
</script>
</head>
<body>
<div id="back-to-top">回到頂部</div>
</body>
</html>
在浏覽器預覽效果如下：
當我們拖動滾動條一段距離（300px）之後，預覽效果如下：
分析：
當我們拖動滾動一段距離（300px）之後，“回到頂部”按鈕會出現，然後點擊按鈕之後，我們就實現了回到頂部效果，此時按鈕也會消失。
這就是我們常見的“回頂部特效”。代碼其實很簡單，小伙伴們一定要好好琢磨實現思路。在學習了下一章“jQuery動畫”之後，我們再來給大家回顧一下這個回頂部特效，並且給這個特效添加用戶體驗更加好的動畫效果。