基于jQuery實(shí)現(xiàn)返回頂部實(shí)例代碼

更新時(shí)間：2016年01月01日 10:12:51 作者：roucheng

這篇文章主要介紹了基于jQuery實(shí)現(xiàn)返回頂部實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

效果圖展示如下所示：

使用方法：

只需引用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)然還有高級的設(shè)置，如換圖片，設(shè)置圖標(biāo)為圓形，設(shè)置位置，設(shè)置時(shí)間等等。詳情請查看其他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">&copy; 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í)例代碼，希望大家喜歡。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)復(fù)選框批量選擇與反選的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)復(fù)選框批量選擇與反選的方法,主要通過jQuery的attr與removeAttr方法實(shí)現(xiàn)選擇與反選的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-06-06
一個背景云變換js特效鼠標(biāo)移動背景云變化
分享一個背景云變換js特效隨著鼠標(biāo)的移動，背景云會不斷的變化位置和形狀,感興趣的朋友可以研究下
2012-12-12
JQuery打造省市下拉框聯(lián)動效果
考慮將需要動態(tài)刷新的內(nèi)容自動拼接到前一個下拉框之后等等，用JQuery實(shí)現(xiàn)比較容易，代碼以省市聯(lián)動效果為例實(shí)現(xiàn)
2014-05-05
基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能
這篇文章主要介紹了基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能的相關(guān)資料,需要的朋友可以參考下
2016-04-04
jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開隱藏效果
本文為大家介紹下使用jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示,離開就隱藏的效果，感興趣的朋友可以參考下哈，希望對大家有所幫助
2013-07-07
jquery實(shí)現(xiàn)簡單的swiper輪播預(yù)覽原圖
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡單的swiper輪播預(yù)覽原圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
jQuery load方法用法集錦
jQuery load方法用法集錦,學(xué)習(xí)jquery的朋友可以參考下。
2011-12-12
Jquery之美中不足小結(jié)
在QWrap群里討論時(shí)，有同學(xué)問jquery/yui等已做到極致，我們有沒必要再重復(fù)造一個叫QWrap的輪子？
2011-02-02
無需 Flash 使用 jQuery 復(fù)制文字到剪貼板
需要做的只是引入其腳本，在HTML標(biāo)簽上賦一個“data-clipboard-target”屬性然后寫一小段JavaScript片段。為了演示假定有一個貨幣轉(zhuǎn)換應(yīng)用，在一個文本框中輸入數(shù)值時(shí)同時(shí)將兌換結(jié)果顯示在另一個文本框中，當(dāng)點(diǎn)擊文本框時(shí)，會觸發(fā)事件將其復(fù)制到剪貼板然后顯示一條消息。
2016-04-04
jQuery鼠標(biāo)事件匯總
鼠標(biāo)事件是指用戶在移動鼠標(biāo)光標(biāo)或者點(diǎn)擊任意鼠標(biāo)鍵時(shí)觸發(fā)的事件,jQuery中封裝了基本上所有的鼠標(biāo)事件包括點(diǎn)擊,雙擊,移動等鼠標(biāo)事件,下面我們就來看下這些事件的語法和用法
2015-08-08