jquery網(wǎng)頁回到頂部效果(圖標(biāo)漸隱,自寫)
原本以為比較難的說,因為上頭要求全部用js來實現(xiàn),哪個頁面引用,哪個頁面顯示。
于是乎,本屌絲就嘗試寫了下,唔,沒發(fā)現(xiàn),還挺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”
直接在第五行和第六行改下大小即可,這樣就避免了頁面添加貓標(biāo)簽~~(>^ω^<)喵~~~
存成js文件,直接引用,哪疼用哪,誰用誰知道~~~
相關(guān)文章
Jquery實現(xiàn)多個表格的全選復(fù)選框功能方式
這篇文章主要介紹了Jquery實現(xiàn)多個表格的全選復(fù)選框功能方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12jquery插件開發(fā)之實現(xiàn)google+圈子選擇功能
最近項目中用到的一個效果,類似于Google+的添加圈子功能。本文插件約8成封裝,好多功能是依據(jù)項目中實際需求寫的。若要使用,可根據(jù)自身情況擴(kuò)展修改2014-03-03ASP.NET jQuery 實例11 通過使用jQuery validation插件簡單實現(xiàn)用戶登錄頁面驗證功能
從這節(jié)開始,我們開始學(xué)習(xí)如何在ASP.NET控件中使用jQuery validation 插件,首先要用它,必須先了解它有什么用2012-02-02jQuery EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項卡的簡單實例
下面小編就為大家?guī)硪黄猨Query EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項卡的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10利用jquery動畫特效和css打造的側(cè)邊彈出垂直導(dǎo)航
這是一款側(cè)邊彈出垂直導(dǎo)航,整個彈出過程比較流暢,而且代碼很簡單,需要的朋友可以參考下2014-04-04jQuery中$.get、$.post、$.getJSON和$.ajax的用法詳解
本文重點是來講講jQuery中調(diào)用ajax的4種方法:$.get、$.post、$getJSON、$ajax。如果讀者沒有javascript和jquery的知識,或者沒有ajax的概念,那么請先去問問度娘,再來讀本文。2014-11-11jquery簡單實現(xiàn)網(wǎng)頁層的展開與收縮效果
這篇文章主要介紹了jquery簡單實現(xiàn)網(wǎng)頁層的展開與收縮效果的方法,涉及jquery中toggle結(jié)合animate方法操作頁面元素屬性的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-08-08jquery Moblie入門—hello world的示例代碼學(xué)習(xí)
jquery Moblie入門:Hello World的示例代碼學(xué)習(xí),感興趣的朋友可以了解下哦2013-01-01