首頁 > web前端 > js教程 > jquery網頁回到頂部效果(圖標漸隱,自寫)_jquery

jquery網頁回到頂部效果(圖標漸隱,自寫)_jquery

WBOY
發布: 2016-05-16 16:44:16
原創
1214 人瀏覽過

唔,進來開發需求,當網頁內容草雞多的時候,用戶就需要有個按鈕快速回到頂部,而不是自己去滾滑輪~

原本以為比較難的說,因為上頭要求全部用js來實現,哪個頁面引用,哪個頁面顯示。

於是乎,本屌絲就嘗試寫了下,唔,沒發現,還挺easy的說~~

有屁我就快放了,直接上代碼,屁放多了就成屎了~~唔,罪過,阿彌陀佛,阿門~~

複製代碼 代碼如下:

//回到頂部js <br>$(function(){ <br>var $btn_top = $('<a id="scrollTopBtn"> <img  src="css/web/images/scrollTop.png" alt="jquery網頁回到頂部效果(圖標漸隱,自寫)_jquery" ></a>'); <br>$btn_top.css({ <br>'display':'none', <br>'width': '40px', <br>'height':'40px', <br>'position':'fixed', <br>'right':'20px', <br>'bottom':'100px', <br>'z-index':'999' <br>}); <br>$("body").append($btn_top); <br>$("body").on("click","# scrollTopBtn",function(){ <br>$("html,body").animate({scrollTop: 0},"slow"); <br>}); <br>var $btn = $("#scrollTopBtn "); <br>if($(window).scrollTop() > 100){ <br>$btn.fadeIn(600); <br>} <br>$(window).scroll(function(){ <br>if($(window).scrollTop() > 100){ <br>$btn.fadeIn(600); <br>}else{ <br>$btn.fadeOut(600); <br>} <br>$btn.fadeOut(600); <br>} <br>} 
登入後複製
});
});


圖片自己找就好啦,我這裡用的是絕對路徑「css/web/images/scrollTop.png」
直接在第五行和第六行改下大小即可,這樣就避免了頁面添加貓標籤~~(>^ω^存成js文件,直接引用,哪痛用哪,誰用誰知道~~~
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板