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

