在網(wǎng)頁開發(fā)中，返回頂部的滾動(dòng)效果是非常常見的一個(gè)需求。在這里，我們將用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的返回頂部滑動(dòng)效果。

$(function(){
//監(jiān)聽頁面滾動(dòng)
$(window).scroll(function(){
//獲取可視窗口的高度
var windowHeight = $(window).height();
//判斷當(dāng)前滾動(dòng)條的位置是否超過一屏
if($(window).scrollTop() >= windowHeight){
//顯示返回頂部按鈕
$(".back-top").fadeIn();
}else{
//隱藏返回頂部按鈕
$(".back-top").fadeOut();
}
});
//返回頂部
$(".back-top").click(function(){
//以滑動(dòng)動(dòng)畫的方式返回頂部
$("html,body").animate({scrollTop:0},500);
});
})

在代碼中，我們先是監(jiān)聽了滾動(dòng)事件，在滾動(dòng)到一屏以上時(shí)，顯示返回頂部按鈕，否則隱藏該按鈕。當(dāng)點(diǎn)擊返回頂部按鈕時(shí)，我們使用了jQuery的animate()函數(shù)，以滑動(dòng)動(dòng)畫的方式返回到頁面頂部。

在HTML中，我們需要添加一個(gè)返回頂部按鈕：

<div class="back-top"></div>

在CSS中，我們可以對(duì)返回頂部按鈕進(jìn)行樣式設(shè)置，例如：

.back-top{
position:fixed;
right:20px;
bottom:20px;
width:60px;
height:60px;
background-color:#333;
border-radius:50%;
text-align:center;
line-height:60px;
color:#fff;
cursor:pointer;
display:none;
}

通過以上代碼，我們就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的返回頂部滑動(dòng)效果了。