基于jQuery實(shí)現(xiàn)返回頂部實(shí)例代碼
效果圖展示如下所示:
使用方法:
只需引用jQuery庫和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>
以上內(nèi)容是給大家分享基于jQuery實(shí)現(xiàn)返回頂部實(shí)例代碼,希望大家喜歡。
- jquery實(shí)現(xiàn)頁面常用的返回頂部效果
- jQuery實(shí)現(xiàn)返回頂部功能
- 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)效果的返回頂部代碼
- 一句jQuery代碼實(shí)現(xiàn)返回頂部效果(簡(jiǎn)單實(shí)用)
相關(guān)文章
基于jQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單效果
這篇文章主要介紹了基于JQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單效果,這個(gè)功能實(shí)現(xiàn)起來很簡(jiǎn)單,需要的朋友可以參考下2015-11-11jQuery的實(shí)現(xiàn)原理的模擬代碼 -5 Ajax
對(duì)于 xhr 對(duì)象來說,我們主要通過異步方式訪問服務(wù)器,在 onreadystatechange 事件中處理服務(wù)器回應(yīng)的內(nèi)容。簡(jiǎn)單的 xhr 使用如下所示。2010-08-08JQuery頁面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)
這篇文章介紹了JQuery頁面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn),有需要的朋友可以參考一下2013-09-09jQuery學(xué)習(xí)總結(jié)之jQuery事件
今天總結(jié)一下jQuery事件,這是比較重要的一塊,希望本次總結(jié)能幫助到很多同我一樣的新手2014-06-06jQuery統(tǒng)計(jì)指定子元素?cái)?shù)量的方法
這篇文章主要介紹了jQuery統(tǒng)計(jì)指定子元素?cái)?shù)量的方法,涉及jQuery可以通過>訪問子標(biāo)簽的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery niceScroll滾動(dòng)條錯(cuò)位問題的解決方法
下面小編就為大家?guī)硪黄猨Query niceScroll滾動(dòng)條錯(cuò)位問題的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02jQuery Password Validation密碼驗(yàn)證
這篇文章主要介紹了jQuery Password Validation密碼驗(yàn)證的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12