今天我們來介紹一下如何使用jQuery來實現(xiàn)返回頁面最上方的功能。通常情況下,用戶需要手動滾動頁面才能回到最頂部,這很不方便,所以我們可以通過jQuery來實現(xiàn)這個功能。
$(document).ready(function(){ $(window).scroll(function(){ if($(this).scrollTop() >100){ $('#back-to-top').fadeIn(); }else{ $('#back-to-top').fadeOut(); } }); $('#back-to-top').click(function(){ $('body,html').animate({ scrollTop:0 },800);//返回頂部所用的時間 return false; }); });
以上這段代碼實現(xiàn)的功能主要包括兩個部分:第一個部分監(jiān)聽窗口滾動事件,如果滾動超過100px,就讓“返回頂部”按鈕彈出來;第二個部分是給“返回頂部”按鈕添加點擊事件,點擊之后通過動畫的形式返回頁面頂部。