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