一句jQuery代碼實(shí)現(xiàn)返回頂部效果(簡(jiǎn)單實(shí)用)
使用方法:
只需引用jQuery庫(kù)和YesTop插件,然后一句代碼就可以實(shí)現(xiàn)返回頂部:
引用代碼:
<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script>
使用代碼:
<script type="text/javascript"> $(document).ready(function () { $.fn.yestop(); }) </script>
也就是:
$.fn.yestop();
這句代碼就可以了。
當(dāng)然還有高級(jí)的設(shè)置,如換圖片,設(shè)置圖標(biāo)為圓形,設(shè)置位置,設(shè)置時(shí)間等等。詳情請(qǐng)查看其他Demo。
完整代碼,保存到HTML文件就可以體驗(yàn)效果:
<!DOCTYPE html> <html> <head><meta charset="UTF-8"> <title>YesTop - HoverTree</title><meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script> <style> body { margin: 0px;font-family:Arial }a{color:blue} </style> </head> <body> <div style="text-align:center;width:100%;margin:0px auto;"> <h1>YesTop</h1> A jQuery Plugin<br /> <a >Demo 1</a> <a >Demo 2</a> <a >Demo 3</a> <a >Demo 4</a> <a >Images</a> </div> <div style="height: 360px;background-color: #66FF66;"> </div> <div style="width:100%;text-align:center;height:200px">© hovertree.com</div> <div style="height: 200px; visibility: visible; background-color: Olive"> </div><div style="height:200px;background-color:burlywood"></div><div style="height:200px;background-color:darkorchid"></div> <div style="height: 200px; visibility: visible; background-color:gray"> </div> <div style="height:200px;background-color:blue"></div> <div style="height:200px;background-color:red"></div> <div style="height:200px;background-color:yellow"></div> <div style="height:200px;background-color:yellowgreen"></div> <div style="height:800px;background-color:white"></div> <script type="text/javascript"> $(document).ready(function () { $.fn.yestop(); }) </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- jquery實(shí)現(xiàn)頁(yè)面常用的返回頂部效果
- jQuery實(shí)現(xiàn)返回頂部功能
- 基于jQuery實(shí)現(xiàn)返回頂部實(shí)例代碼
- jQuery實(shí)現(xiàn)的個(gè)性化返回底部與返回頂部特效代碼
- jquery小火箭返回頂部代碼分享
- jQuery實(shí)現(xiàn)返回頂部效果的方法
- 使用jQuery實(shí)現(xiàn)返回頂部
- jquery 實(shí)現(xiàn)返回頂部功能
- jQuery實(shí)現(xiàn)返回頂部功能適合不支持js的瀏覽器
- 用jQuery實(shí)現(xiàn)的智能隱藏、滑動(dòng)效果的返回頂部代碼
相關(guān)文章
jquery實(shí)現(xiàn)div拖拽寬度示例代碼
本例為大家演示個(gè)比較簡(jiǎn)單的div拖動(dòng),另外可根據(jù)自己的需求,添加相應(yīng)的代碼,實(shí)現(xiàn)自己的想要的效果,具體如下,喜歡的請(qǐng)支持下2013-07-07Jquery submit()無(wú)法提交問(wèn)題
代碼點(diǎn)擊注冊(cè)按鈕時(shí)無(wú)法提交表單,名稱沖突可能會(huì)導(dǎo)致混亂的失敗,接下來(lái)為大家介紹下解決方法,感興趣的朋友可以了解下2013-04-04JqueryMobile動(dòng)態(tài)生成listView并實(shí)現(xiàn)刷新的兩種方法
本篇文章主要是對(duì)JqueryMobile動(dòng)態(tài)生成listView并實(shí)現(xiàn)刷新的兩種方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03js(jQuery)獲取時(shí)間的方法及常用時(shí)間類搜集
獲取時(shí)間的方法及常用時(shí)間類都是大家經(jīng)常使用的,在本文為大家整理了一些,個(gè)人感覺(jué)還比較全,感興趣的朋友可以收集下2013-10-10jQuery 函數(shù)實(shí)例分析【函數(shù)聲明、函數(shù)表達(dá)式、匿名函數(shù)等】
這篇文章主要介紹了jQuery 函數(shù),結(jié)合實(shí)例形式分析了jquery函數(shù)聲明、函數(shù)表達(dá)式、匿名函數(shù)等相關(guān)使用技巧,需要的朋友可以參考下2020-05-05jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出提示信息的地圖熱點(diǎn)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出提示信息的地圖熱點(diǎn)效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素樣式的動(dòng)態(tài)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08JQuery移動(dòng)頁(yè)面開發(fā)之屏幕方向改變與滾屏的實(shí)現(xiàn)
這篇文章主要介紹了JQuery移動(dòng)頁(yè)面開發(fā)之隨屏幕方向改變與滾屏的實(shí)現(xiàn),通過(guò)相關(guān)兩個(gè)事件的添加來(lái)達(dá)到響應(yīng)移動(dòng)設(shè)備上操作的效果,需要的朋友可以參考下2015-12-12