快捷導(dǎo)航

一句jQuery代碼實(shí)現(xiàn)返回頂部效果（簡(jiǎn)單實(shí)用）

更新時(shí)間：2016年12月28日 11:26:49 作者：roucheng

本文主要分享了利用一句jQuery代碼實(shí)現(xiàn)返回頂部效果的實(shí)例。代碼簡(jiǎn)單，保存到HTML文件就可以體驗(yàn)效果。下面跟著小編一起來看下吧

使用方法：

只需引用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">&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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

jQuery功能函數(shù)詳解
這篇文章主要詳細(xì)介紹了一些jQuery功能函數(shù)，例如瀏覽器檢測(cè)，字符串處理、數(shù)組的編輯等,需要的朋友可以參考下
2015-02-02
jquery實(shí)現(xiàn)div拖拽寬度示例代碼
本例為大家演示個(gè)比較簡(jiǎn)單的div拖動(dòng)，另外可根據(jù)自己的需求，添加相應(yīng)的代碼，實(shí)現(xiàn)自己的想要的效果，具體如下，喜歡的請(qǐng)支持下
2013-07-07
Jquery submit()無法提交問題
代碼點(diǎn)擊注冊(cè)按鈕時(shí)無法提交表單，名稱沖突可能會(huì)導(dǎo)致混亂的失敗,接下來為大家介紹下解決方法，感興趣的朋友可以了解下
2013-04-04
JqueryMobile動(dòng)態(tài)生成listView并實(shí)現(xiàn)刷新的兩種方法
本篇文章主要是對(duì)JqueryMobile動(dòng)態(tài)生成listView并實(shí)現(xiàn)刷新的兩種方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-03-03
js(jQuery)獲取時(shí)間的方法及常用時(shí)間類搜集
獲取時(shí)間的方法及常用時(shí)間類都是大家經(jīng)常使用的，在本文為大家整理了一些，個(gè)人感覺還比較全，感興趣的朋友可以收集下
2013-10-10
jQuery 函數(shù)實(shí)例分析【函數(shù)聲明、函數(shù)表達(dá)式、匿名函數(shù)等】
這篇文章主要介紹了jQuery 函數(shù),結(jié)合實(shí)例形式分析了jquery函數(shù)聲明、函數(shù)表達(dá)式、匿名函數(shù)等相關(guān)使用技巧,需要的朋友可以參考下
2020-05-05
jquery傳參及獲取方式(兩種方式)
這篇文章主要介紹了jquery傳參及獲取方式,本文給大家兩種方式，通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-02-02
基于jquery的$.ajax async使用
默認(rèn)設(shè)置下，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行
2011-10-10
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點(diǎn)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點(diǎn)效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素樣式的動(dòng)態(tài)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
JQuery移動(dòng)頁(yè)面開發(fā)之屏幕方向改變與滾屏的實(shí)現(xiàn)
這篇文章主要介紹了JQuery移動(dòng)頁(yè)面開發(fā)之隨屏幕方向改變與滾屏的實(shí)現(xiàn),通過相關(guān)兩個(gè)事件的添加來達(dá)到響應(yīng)移動(dòng)設(shè)備上操作的效果,需要的朋友可以參考下
2015-12-12