jquery網(wǎng)頁回到頂部效果(圖標(biāo)漸隱,自寫)
更新時(shí)間：2014年06月16日 16:37:19 投稿：whsnow
當(dāng)網(wǎng)頁內(nèi)容草雞多的時(shí)候，用戶就需要有個(gè)按鈕快速回到頂部，于是用js來實(shí)現(xiàn)下，畫布多說，直接上代碼
唔，進(jìn)來開發(fā)需求，當(dāng)網(wǎng)頁內(nèi)容草雞多的時(shí)候，用戶就需要有個(gè)按鈕快速回到頂部，而不是自己去滾滑輪~
原本以為比較難的說，因?yàn)樯项^要求全部用js來實(shí)現(xiàn)，哪個(gè)頁面引用，哪個(gè)頁面顯示。
于是乎，本屌絲就嘗試寫了下，唔，沒發(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);
}
});
});
圖片自己找個(gè)就好啦，我這里用的是絕對路徑“css/web/images/scrollTop.png”
直接在第五行和第六行改下大小即可，這樣就避免了頁面添加貓標(biāo)簽~~(>^ω^<)喵~~~
存成js文件，直接引用，哪疼用哪，誰用誰知道~~~
原本以為比較難的說，因?yàn)樯项^要求全部用js來實(shí)現(xiàn)，哪個(gè)頁面引用，哪個(gè)頁面顯示。
于是乎，本屌絲就嘗試寫了下，唔，沒發(fā)現(xiàn)，還挺easy的說~~
有屁我就快放了，直接上代碼，屁放多了就成屎了~~唔，罪過，阿彌陀佛，阿門~~
復(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è)就好啦，我這里用的是絕對路徑“css/web/images/scrollTop.png”
直接在第五行和第六行改下大小即可，這樣就避免了頁面添加貓標(biāo)簽~~(>^ω^<)喵~~~
存成js文件，直接引用，哪疼用哪，誰用誰知道~~~
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)簡單的回到頂部totop功能示例
- 如何利用JQuery實(shí)現(xiàn)從底部回到頂部的功能
- jquery實(shí)現(xiàn)點(diǎn)擊頁面回到頂部
- jquery實(shí)現(xiàn)跳到底部，回到頂部效果的簡單實(shí)例(類似錨)
- jQuery回到頂部的代碼
- jQuery實(shí)現(xiàn)帶有動(dòng)畫效果的回到頂部和底部代碼
- jquery實(shí)現(xiàn)的動(dòng)態(tài)回到頂部特效代碼
- jQuery實(shí)現(xiàn)分章節(jié)錨點(diǎn)“回到頂部”動(dòng)畫特效代碼
- jQuery實(shí)現(xiàn)回到頂部效果
相關(guān)文章
jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程
這篇文章主要介紹了jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程,本文講解了從WFC編程到JQUERY調(diào)用的詳細(xì)步驟,并總結(jié)了使用中遇到的問題和解決方法,需要的朋友可以參考下2015-03-03
在jquery中自定義函數(shù)你會(huì)嗎？今天抽時(shí)間寫了幾個(gè)，個(gè)人感覺還不錯(cuò)，喜歡的朋友可以了解下2014-01-01
jQuery ui 利用 datepicker插件實(shí)現(xiàn)開始日期(minDate)和結(jié)束日期(maxDate)
這篇文章主要介紹了jQuery ui 利用 datepicker插件實(shí)現(xiàn)開始日期(minDate)和結(jié)束日期(maxDate),需要的朋友可以參考下2014-05-05
jQuery之$(document).ready()使用介紹
學(xué)習(xí)jQuery的第一件事是：如果你想要一個(gè)事件運(yùn)行在你的頁面上，你必須在$(document).ready()里調(diào)用這個(gè)事件2012-04-04
在高版本的jquery引入prop方法后，什么時(shí)候該用prop？什么時(shí)候用attr？關(guān)于它們兩個(gè)的區(qū)別，這里談?wù)勎业男牡?，我的心得很簡單：對于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。對于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。2015-05-05
jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁3D輪播圖封裝功能【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁3D輪播圖封裝功能,結(jié)合實(shí)例形式詳細(xì)分析了基于jQuery插件Figure_3D.js實(shí)現(xiàn)3D輪播圖功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
純JAVASCRIPT圖表動(dòng)畫插件Highcharts Examples
官方提供免費(fèi)的下載包以及詳細(xì)的文檔說明，非常的值得收藏。2011-04-04
jquery獲取焦點(diǎn)和失去焦點(diǎn)事件代碼
鼠標(biāo)在搜索框中點(diǎn)擊的時(shí)候里面的文字就消失了，經(jīng)常會(huì)用到搜索框的獲得焦點(diǎn)和失去焦點(diǎn)的事件，接下來介紹一下具體代碼，感興趣的朋友額可以參考下2013-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
$.ajax返回的JSON無法執(zhí)行success的解決方法
為什么會(huì)這樣子呢？在網(wǎng)上查了好久，結(jié)果發(fā)現(xiàn)是因?yàn)槲抑付薲ataType:'json',這樣一指定完蛋了，對Json的要求就非常嚴(yán)格起來了2011-09-09