DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery網頁回到頂部效果(圖標漸隱,自寫)
jquery網頁回到頂部效果(圖標漸隱,自寫)
編輯:JQuery特效代碼     
唔,進來開發需求,當網頁內容草雞多的時候,用戶就需要有個按鈕快速回到頂部,而不是自己去滾滑輪~

原本以為比較難的說,因為上頭要求全部用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文件,直接引用,哪疼用哪,誰用誰知道~~~
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved