在頁面中，當(dāng)滾動條下滑到一定位置時就會出現(xiàn)返回頂部的圖標，點擊圖標后頁面平緩的回到頂部位置。到了頂部，這個圖標又會消失。
這個功能可以用jQuery來實現(xiàn)。
首先要明確核心的知識點：
scroll():當(dāng)用戶滾動指定的元素時，會發(fā)生 scroll 事件。scroll 事件適用于所有可滾動的元素和 window 對象（瀏覽器窗口）。
scrollTop():獲取匹配元素相對滾動條頂部的偏移。此方法對可見和隱藏元素均有效。
在<body>中寫一個返回頂端的小標志
<a href="javaScript:;" class="top">TOP</a>
為它添加css樣式
<style type="text/css">
.top {
width: 50px;
height: 37px;
background: skyblue;
cursor: pointer;
color: white;
text-align: center;
padding-top: 13px;
position: fixed;
right: 100px;
bottom: 50px;
display: none;
}
.top:hover {
background: yellowgreen;
}
a{
text-decoration: none;
}
</style>
現(xiàn)在開始寫jQuery的代碼，先引入jQuery的包，一定要放在代碼前哦~
<script src="./js/jquery.min.js"></script>
正式開始
<script>
//為了顯示效果，先利用for循環(huán)多輸出一些內(nèi)容
for (var i = 0; i < 100; i++) {
document.write("<h1>" + i + "</h1>");
}
$(function() {
//返回頂部===>出現(xiàn)與消失
//當(dāng)屏幕滾動，觸生 scroll 事件
$(window).scroll(function() {
var top1 = $(this).scrollTop(); //獲取相對滾動條頂部的偏移
if (top1>200) { //當(dāng)偏移大于200px時讓圖標淡入（css設(shè)置為隱藏）
$(".top").stop().fadeIn();
}else{
//當(dāng)偏移小于200px時讓圖標淡出
$(".top").stop().fadeOut();
}
});
//去往頂部
$(".top").click(function(){
$("body , html").animate({scrollTop:0},300); //300是所用時間
});
});
</script>
在執(zhí)行返回頂部操作時，chrome瀏覽器等-webkit內(nèi)核都是支持body的，IE及Firefox就不好使了，所以要加上一個html就可以了。
返回頂部
