jquery網(wǎng)頁(yè)回到頂部效果(圖標(biāo)漸隱,自寫(xiě))

更新時(shí)間：2014年06月16日 16:37:19 投稿：whsnow

當(dāng)網(wǎng)頁(yè)內(nèi)容草雞多的時(shí)候，用戶(hù)就需要有個(gè)按鈕快速回到頂部，于是用js來(lái)實(shí)現(xiàn)下，畫(huà)布多說(shuō)，直接上代碼

唔，進(jìn)來(lái)開(kāi)發(fā)需求，當(dāng)網(wǎng)頁(yè)內(nèi)容草雞多的時(shí)候，用戶(hù)就需要有個(gè)按鈕快速回到頂部，而不是自己去滾滑輪~

原本以為比較難的說(shuō)，因?yàn)樯项^要求全部用js來(lái)實(shí)現(xiàn)，哪個(gè)頁(yè)面引用，哪個(gè)頁(yè)面顯示。

于是乎，本屌絲就嘗試寫(xiě)了下，唔，沒(méi)發(fā)現(xiàn)，還挺easy的說(shuō)~~

有屁我就快放了，直接上代碼，屁放多了就成屎了~~唔，罪過(guò)，阿彌陀佛，阿門(mén)~~

復(fù)制代碼代碼如下:

 
<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); 
} 
}); 
}); 

圖片自己找個(gè)就好啦，我這里用的是絕對(duì)路徑“css/web/images/scrollTop.png”

直接在第五行和第六行改下大小即可，這樣就避免了頁(yè)面添加貓標(biāo)簽~~(>^ω^<)喵~~~

存成js文件，直接引用，哪疼用哪，誰(shuí)用誰(shuí)知道~~~

您可能感興趣的文章:

相關(guān)文章

jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程
這篇文章主要介紹了jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程,本文講解了從WFC編程到JQUERY調(diào)用的詳細(xì)步驟,并總結(jié)了使用中遇到的問(wèn)題和解決方法,需要的朋友可以參考下
2015-03-03
jquery自定義函數(shù)的多種方法
在jquery中自定義函數(shù)你會(huì)嗎？今天抽時(shí)間寫(xiě)了幾個(gè)，個(gè)人感覺(jué)還不錯(cuò)，喜歡的朋友可以了解下
2014-01-01
jQuery ui 利用 datepicker插件實(shí)現(xiàn)開(kāi)始日期(minDate)和結(jié)束日期(maxDate)
這篇文章主要介紹了jQuery ui 利用 datepicker插件實(shí)現(xiàn)開(kāi)始日期(minDate)和結(jié)束日期(maxDate),需要的朋友可以參考下
2014-05-05
jQuery之$(document).ready()使用介紹
學(xué)習(xí)jQuery的第一件事是：如果你想要一個(gè)事件運(yùn)行在你的頁(yè)面上，你必須在$(document).ready()里調(diào)用這個(gè)事件
2012-04-04
jQuery中 prop() attr()使用詳解
在高版本的jquery引入prop方法后，什么時(shí)候該用prop？什么時(shí)候用attr？關(guān)于它們兩個(gè)的區(qū)別，這里談?wù)勎业男牡茫业男牡煤芎?jiǎn)單：對(duì)于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。對(duì)于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。
2015-05-05
jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁(yè)3D輪播圖封裝功能【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁(yè)3D輪播圖封裝功能,結(jié)合實(shí)例形式詳細(xì)分析了基于jQuery插件Figure_3D.js實(shí)現(xiàn)3D輪播圖功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
純JAVASCRIPT圖表動(dòng)畫(huà)插件Highcharts Examples
官方提供免費(fèi)的下載包以及詳細(xì)的文檔說(shuō)明，非常的值得收藏。
2011-04-04
jquery獲取焦點(diǎn)和失去焦點(diǎn)事件代碼
鼠標(biāo)在搜索框中點(diǎn)擊的時(shí)候里面的文字就消失了，經(jīng)常會(huì)用到搜索框的獲得焦點(diǎn)和失去焦點(diǎn)的事件，接下來(lái)介紹一下具體代碼，感興趣的朋友額可以參考下
2013-04-04
jQuery實(shí)現(xiàn)簡(jiǎn)單日歷效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07
$.ajax返回的JSON無(wú)法執(zhí)行success的解決方法
為什么會(huì)這樣子呢？在網(wǎng)上查了好久，結(jié)果發(fā)現(xiàn)是因?yàn)槲抑付薲ataType:'json',這樣一指定完蛋了，對(duì)Json的要求就非常嚴(yán)格起來(lái)了
2011-09-09