jquery實(shí)現(xiàn)的動(dòng)態(tài)回到頂部特效代碼
本文實(shí)例講述了jquery實(shí)現(xiàn)的動(dòng)態(tài)回到頂部特效代碼。分享給大家供大家參考,具體如下:
這款jquery動(dòng)態(tài)回到頂部特效,不是一下子就回到了網(wǎng)頁頂部,而是帶點(diǎn)緩沖的效果,有動(dòng)畫效果,使用了jQuery插件,這是個(gè)非常常用的網(wǎng)頁特效,希望大家喜歡哦。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery動(dòng)態(tài)回到頂部特效</title> </head> <body> <style> #goTopBtn {position: fixed;line-height:36px;width:36px;bottom:35px;height:36px;cursor:pointer;display:none; background:url(images/back_to_top_white.gif);} </style> <br/> <p style="text-align:center;font-family:Georgia, 'Times New Roman', Times, serif;font-size:24px;font-weight:bold;">***,how are you。 <br/>Just do what you want do!!!</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <div id="goTopBtn"></div> <script type="text/javascript" src="jquery1.3.2.js"></script> <script type="text/javascript"> $(window).scroll(function(){ var sc=$(window).scrollTop(); var rwidth=$(window).width() if(sc>0){ $("#goTopBtn").css("display","block"); $("#goTopBtn").css("left",(rwidth-36)+"px") }else{ $("#goTopBtn").css("display","none"); } }) $("#goTopBtn").click(function(){ var sc=$(window).scrollTop(); $('body,html').animate({scrollTop:0},500); }) </script> </body> </html>
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)簡(jiǎn)單的回到頂部totop功能示例
- 如何利用JQuery實(shí)現(xiàn)從底部回到頂部的功能
- jquery實(shí)現(xiàn)點(diǎn)擊頁面回到頂部
- jquery實(shí)現(xiàn)跳到底部,回到頂部效果的簡(jiǎn)單實(shí)例(類似錨)
- jQuery回到頂部的代碼
- jQuery實(shí)現(xiàn)帶有動(dòng)畫效果的回到頂部和底部代碼
- jQuery實(shí)現(xiàn)分章節(jié)錨點(diǎn)“回到頂部”動(dòng)畫特效代碼
- jquery網(wǎng)頁回到頂部效果(圖標(biāo)漸隱,自寫)
- jQuery實(shí)現(xiàn)回到頂部效果
相關(guān)文章
jQuery實(shí)現(xiàn)調(diào)整表格單列順序完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)調(diào)整表格單列順序的方法,結(jié)合完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件及動(dòng)態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jQuery+PHP實(shí)現(xiàn)可編輯表格字段內(nèi)容并實(shí)時(shí)保存
在本例中,我們會(huì)通過jQuery實(shí)現(xiàn)單擊將一個(gè)文本信息變?yōu)榭删庉嫷谋韱危憧梢詫?duì)文本內(nèi)容進(jìn)行編輯,然后點(diǎn)擊“確定”按鈕,新的內(nèi)容將發(fā)送到后臺(tái)PHP程序處理,并保存到數(shù)據(jù)庫;當(dāng)點(diǎn)擊“取消”按鈕,則頁面恢復(fù)到初始狀態(tài),需要的朋友可以參考下2015-10-10基于jquery實(shí)現(xiàn)頁面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏
這篇文章主要介紹了基于jquery實(shí)現(xiàn)頁面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏效果,當(dāng)頁面向下滾動(dòng)的時(shí)候,導(dǎo)航菜單動(dòng)態(tài)隱藏,頁面滾動(dòng)到頂部時(shí),導(dǎo)航菜單動(dòng)態(tài)顯示,淘寶也采用過此效果,感興趣的小伙伴們可以參考一下2015-11-11jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能【附php后臺(tái)接收】
這篇文章主要介紹了jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能,結(jié)合實(shí)例形式分析了jQuery+ajax結(jié)合layer.js插件與php后臺(tái)交互,實(shí)現(xiàn)顯示上傳進(jìn)度的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06jQuery實(shí)現(xiàn)checkbox全選、反選及刪除等操作的方法詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)checkbox全選、反選及刪除等操作的方法,結(jié)合實(shí)例形式形式詳細(xì)分析了jQuery針對(duì)checkbox多選按鈕常見批量操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-08-08jquery實(shí)時(shí)獲取時(shí)間的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨query實(shí)時(shí)獲取時(shí)間的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01基于jquery的lazy loader插件實(shí)現(xiàn)圖片的延遲加載[簡(jiǎn)單使用]
當(dāng)網(wǎng)站上有大量圖片要展示的話,如果一次把所有的圖片都加載出來的話,這勢(shì)必會(huì)影響網(wǎng)站的加載速度,給用戶帶來比較差的體驗(yàn)。2011-05-05