唔,進來開發需求,當網頁內容草雞多的時候,用戶就需要有個按鈕快速回到頂部,而不是自己去滾滑輪~
原本以為比較難的說,因為上頭要求全部用js來實現,哪個頁面引用,哪個頁面顯示。
於是乎,本屌絲就嘗試寫了下,唔,沒發現,還挺easy的說~~
有屁我就快放了,直接上代碼,屁放多了就成屎了~~唔,罪過,阿彌陀佛,阿門~~
. 代碼如下:
<pre name="code" class="javascript">//回到頂部js
$(function(){
var $btn_top = $('<a id="scrollTopBtn"><img src="css/web/images/scrollTop.png"></a>');
$btn_top.css({
'display':'none',
'width':'40px',
'height':'40px',
'position':'fixed',
'right':'20px',
'bottom':'100px',
'z-index':'999'
});
$("body").append($btn_top);
$("body").on("click","#scrollTopBtn",function(){
$("html,body").animate({scrollTop: 0},"slow");
});
var $btn = $("#scrollTopBtn");
if($(window).scrollTop() > 100){
$btn.fadeIn(600);
}
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$btn.fadeIn(600);
}else{
$btn.fadeOut(600);
}
});
});
圖片自己找個就好啦,我這裡用的是絕對路徑“css/web/images/scrollTop.png”
直接在第五行和第六行改下大小即可,這樣就避免了頁面添加貓標簽~~(>^ω^<)喵~~~
存成js文件,直接引用,哪疼用哪,誰用誰知道~~~