JQuery BackTop 是一個非常好用的 Jquery 插件,可以將頁面中的返回頂部按鈕實現。
使用JQuery BackTop 插件可以極大的提高網站的用戶體驗,方便用戶達到頁面頂部。
$(document).ready(function() { //當滾動條的位置距離頂部超過300像素時,出現返回頂部按鈕 $(window).scroll(function() { if ($(this).scrollTop() >300) { $('.backTop').fadeIn(); } else { $('.backTop').fadeOut(); } }); //點擊返回頂部按鈕實現平滑滾動效果 $('.backTop').click(function() { $('html, body').animate({ scrollTop: 0 }, 800); return false; }); });
以上代碼就是使用 JQuery BackTop 插件實現返回頂部功能的代碼。
當頁面滾動條位置距離頂部超過300像素時,返回頂部按鈕出現。點擊返回頂部按鈕實現平滑滾動效果。
通過使用 JQuery BackTop 插件,可以方便的實現頁面的返回頂部功能,提高網站用戶的體驗。