我們在使用網頁瀏覽器的時候,經常需要將頁面滾動到頂部。這個時候,我們可以使用jQuery來實現跳轉到頁面頂端的功能。
$(document).ready(function(){ // 綁定頁面滾動事件 $(window).scroll(function(){ // 當滾動高度超過100,顯示回到頂部按鈕 if($(window).scrollTop()>100){ $("#btn-top").fadeIn(); }else{ $("#btn-top").fadeOut(); } }); // 綁定回到頂部按鈕點擊事件 $("#btn-top").click(function(){ $("html,body").animate({scrollTop:0},500); }); });
上面這段代碼首先在頁面加載完成后綁定了一個滾動事件,當頁面滾動高度超過100時,顯示回到頂部按鈕。當用戶點擊按鈕時,通過animate函數將頁面滾動到頂端,其中scrollTop控制滾動的高度,500表示滾動的時間。
在頁面中我們需要添加一個回到頂部按鈕,并賦予其一個id值為btn-top。
<a href="javascript:void(0);" id="btn-top">回到頂部</a>
通過以上代碼,我們就可以輕松實現跳轉到頁面頂端的功能了。
上一篇css怎么實現邊框閃爍
下一篇css怎么固定網頁大小