在網(wǎng)站中,我們經(jīng)常需要使用頁面回到頂部的功能。這時候,我們可以使用jQuery來實現(xiàn)這個功能。
首先,在HTML文件中引入jQuery庫。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
然后,我們可以使用以下代碼實現(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(){ $('html, body').animate({scrollTop : 0},800); return false; }); });
上述代碼中,“#back-to-top”是回到頂部按鈕的ID。
當用戶滾動頁面時,如果頁面滾動距離大于100px,則回到頂部按鈕將淡入顯示,否則淡出隱藏。
當用戶點擊回到頂部按鈕時,我們使用animate()方法來平滑滾動到頁面頂部。animate()方法還可以添加時間參數(shù),此處我們設(shè)置800毫秒,時間越長則滾動越平滑。
最后,我們在HTML文件中添加回到頂部按鈕:
<a href="#" id="back-to-top" title="Back to Top">返回頂部</a>
使用以上代碼,我們就可以很方便地在網(wǎng)站中添加回到頂部的功能了。