一句jQuery代码返回顶部

效果体验：

http://hovertree.com/texiao/yestop/

使用方法：

只需引用jQuery库和YesTop插件，然后一句代码就可以实现返回顶部：

引用代码：
<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();

这句代码就可以了。
当然还有高级的设置，如换图片，设置图标为圆形，设置位置，设置时间等等。详情请查看其他Demo。
完整代码，保存到HTML文件就可以体验效果：
<!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 href="http://hovertree.com/texiao/yestop/">Demo 1</a> <a href="http://hovertree.com/texiao/yestop/demo2.htm">Demo 2</a> <a href="http://hovertree.com/texiao/yestop/demo3.htm">Demo 3</a>

        <a href="http://hovertree.com/texiao/yestop/demo4.htm">Demo 4</a> <a href="http://hovertree.com/h/bjaf/topimage.htm">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>

更多：http://www.cnblogs.com/roucheng/p/texiao.html

一句jQuery代码返回顶部的更多相关文章

  1. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  2. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  3. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  4. jQuery 一句代码返回顶部

    兼容各大主流浏览器,jQuery返回顶部,一句代码搞定 <a class="top" href="javascript:;" style="po ...

  5. 用Jquery写返回顶部代码

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>jq ...

  6. 简单的JQuery top返回顶部

    一个最简单的JQuery Top返回的代码,Mark一下: HTML如下: <div id="backtop"> <a href="javascript ...

  7. 使用jquery实现返回顶部按钮

    实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...

  8. jquery 实现 返回顶部

      //Html代码: <div class="backToTop" title="返回顶部">返回顶部</div> //代码 //CS ...

  9. 转载：jQuery实现返回顶部功能

    转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图   ...

随机推荐

  1. Mac读取Andriod屏幕截图

    int main(int argc, const char * argv[]) { // insert code here... string str3 = "/Users/Ethan/Do ...

  2. [Voice communications] 看得到的音频流

    上文介绍了 Web Audio API 的相关知识,以及如何在你的 web 程序中引入 音频流,内容都是介绍性的,所以没有写太多 DEMO.本文重点讲解如何利用 Web Audio API 中的中间节 ...

  3. 程序员眼中的 SQL Server－执行计划教会我如何创建索引？

    先说点废话 以前有 DBA 在身边的时候,从来不曾考虑过数据库性能的问题,但是,当一个应用程序从头到脚都由自己完成,而且数据库面对的是接近百万的数据,看着一个页面加载速度像乌龟一样,自己心里真是有种挫 ...

  4. 东哥读书小记 之 《MacTalk人生元编程》

         一直以来的自我感觉:自己是个记性偏弱的人.反正从小读书就喜欢做笔记(可自己的字写得巨丑无比,尼玛不科学呀),抄书这事儿真的就常发生俺的身上. 因为那时经常要背诵课文之类,反正为了怕自己忘记, ...

  5. RegSvr32注册OCX时报错

    RegSvr32注册OCX时报错. 错误1: 模块“dsoframer2007.ocx”已加载,但对 DllRegisterServer 的调用失败,错误代码为 0x80070005. 有关此问题的详 ...

  6. EasyUI刚加载时候Window窗体自动弹出的解决办法

  7. OpenCASCADE Curve Length Calculation

    OpenCASCADE Curve Length Calculation eryar@163.com Abstract. The natural parametric equations of a c ...

  8. 【原创】机器学习之PageRank算法应用与C#实现(1)算法介绍

    考虑到知识的复杂性,连续性,将本算法及应用分为3篇文章,请关注,将在本月逐步发表. 1.机器学习之PageRank算法应用与C#实现(1)算法介绍 2.机器学习之PageRank算法应用与C#实现(2 ...

  9. iOS开发之窥探UICollectionViewController(四) --一款功能强大的自定义瀑布流

    在上一篇博客中<iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流>,自定义瀑布流的列数,Cell的外边距,C ...

  10. 关于SVN链接服务器Unable to connect to a repository at URL*报错问题

    在BAE上托管了写代码,想用SVN做版本控制,可是死活连不上,但用Dreamweave可以连上,整了半天是dan疼的缓存问题,清一下缓存就OK了. TortoiseSVN->Setting-&g ...