Jquery可以通過簡單的幾行代碼來實現頁面返回頂部的功能。在頁面底部引入jquery庫后,我們可以通過以下代碼來實現:
$(document).ready(function() { //當窗口發生滾動時 $(window).scroll(function() { //若滾動高度超過300px,則顯示返回頂部按鈕 if ($(this).scrollTop() > 300) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); //當點擊返回按鈕時 $('#back-to-top').click(function() { //通過動畫的方式返回頂部 $('body,html').animate({ scrollTop: 0 }, 800); return false; }); });
以上代碼通過查找scrollTop屬性來判斷滾動高度是否超過300px,然后通過fadeIn和fadeOut來切換顯示和隱藏返回頂部的按鈕。當點擊按鈕時,通過animate來實現平滑且有動畫效果地返回頂部。
需要注意的是,以上代碼中back-to-top是返回按鈕的id,需要在頁面中定義相應的html元素,如:
<a id="back-to-top" href="#" title="返回頂部"> <i class="iconfont icon-up"></i> </a>
其中iconfont是字體圖標庫,icon-up是返回按鈕的圖標,需要在css中定義。
上一篇css彩色進度條
下一篇jquery過濾字符串