今天與大家分享下網頁中經常出現的返回頂部效果
相比原生Javascript,jquery實現起來能夠省略不少代碼。
接下來就直接貼代碼啦:
$(function(){ $(window).scroll(function(){ //scroll--瀏覽器滾動條滾動式觸發 var wHeight=$(window).height(); //獲取瀏覽器可視窗口高度 var wTop=$(window).scrollTop(); //獲取滾動條距離頂部高度 if(wTop>=wHeight) //當滾動條距離頂部高度超過一屏時執行 { $("#btn").show(); //返回頂部按鈕顯示 } else{ $("#btn").hide(); //返回頂部按鈕隱藏 } }); $("#btn").click(function(){ $("html,body").animate({scrollTop:0},500); //頁面500毫秒返回頂部 }); });ok,是不是很簡單,jquery直接為我們提供的animate方法可以很快實現返回頂部的動畫效果。
以上就是本文的全部內容,希望對大家有所幫助,同時也希望多多支持武林網!
新聞熱點
疑難解答