jQuery是一個非常常用的JavaScript庫,它可以以更少的代碼來實現(xiàn)更加強大的功能,如滾動到頁面頂部的功能就可以很輕松地實現(xiàn)。
具體實現(xiàn)方法是利用jQuery的scrollTop()方法來獲取當前頁面卷去的高度,然后再根據(jù)用戶的需求,設(shè)置是否需要添加“回到頂部”按鈕的顯示和隱藏,以及按鈕點擊時頁面的滾動效果。
$(document).ready(function() { $(window).scroll(function() { // 監(jiān)測頁面滾動事件 if ($(this).scrollTop() > 100) { // 如果已經(jīng)卷去的高度大于100px $('#back-to-top').fadeIn(); // 顯示回到頂部按鈕 } else { $('#back-to-top').fadeOut(); // 隱藏回到頂部按鈕 } }); $('#back-to-top').click(function() { // 綁定回到頂部按鈕的點擊事件 $('html, body').animate({ scrollTop: 0 // 點擊后,頁面滾動到頂部 }, 800); return false; // 防止頁面跳轉(zhuǎn),必須返回false }); });
以上代碼中,我們首先通過$(document).ready()方法以確保DOM已經(jīng)加載完成,然后通過$(window).scroll()方法來監(jiān)測頁面的滾動事件。如果滾動超過100px,就顯示回到頂部的按鈕;否則,隱藏按鈕。
當回到頂部按鈕被點擊時,我們使用animate()方法來設(shè)置頁面滾動的動畫效果,并讓scrollTop()屬性值逐漸變?yōu)?,這表示頁面卷去的高度減去的高度越來越低,最終就滑動到頁面頂部了。animate()方法的第二個參數(shù)800表示動畫持續(xù)的時間,這里設(shè)置為800毫秒,也就是0.8秒。
最后,為了防止頁面跳轉(zhuǎn),我們必須返回false。