一句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. Box-sizing：小身材，大拳头！

    国庆回来,很久没写博客了.一来是自己毫无时间,二是最近开发任务特别紧,三是节后综合症,脑子一片空白没有找到写作的原材料.今天,在加完班回来的22点,忙里偷闲,分享一下最近学到的一个小知识点如题.标题的 ...

  2. C#设计模式之组合

    IronMan之组合 在上个篇幅中讲到怎么把“武器”装饰到“部件”上,这个篇幅呢,还是要讲到“武器”,不过呢是关于“武器”使用的. 本篇介绍"武器"的合理使用方式,不说废话,直接来 ...

  3. Android学习——uses-sdk标签详解

    1 前言 我们都知道,Android的版本在不断的迭代,并且每个版本都加入了不同的新特性.那么随着Android的用户量越来越多,Android的开发人员就必须熟悉Android各个版本的特性并且确保 ...

  4. Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放

    UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图 ...

  5. Redis系列-好玩的用法

    分布式锁 客户端执行如下命令,来获取锁和释放锁. random = random() ok = (Set key random PX 2000ms NX) if (ok) { //do somethi ...

  6. 【原】通过JS打开IE新tab（非Window）的解决方案

    近日项目里遇到限定在IE的tab窗口里打开新窗口的需求,结合网上的资源和亲自实践,总结以下比较可行的解决方案. 1.首先必须保证IE的设置正确.打开IE的Internet options ->G ...

  7. salesforce 零基础学习（五十）自定义View或者List以及查看系统原来的View或者List

    salesforce给我们提供了标准的页面,比如标准的页面包括标准的列表和标准的详细页视图.有的时候我们想要自定义视图,比如做一个项目的时候不希望使用者直接通过ID查看到标准的详细页,而是跳转到指定处 ...

  8. iOS开发-闪退问题-解决之前上架的 App 在 iOS 9 会闪退问题

    最新更新:(2015.10.02) 开发环境: Delphi 10 Seattle OS X El Capitan v10.11 需使用下列 HotfixID: 30398, PAServer Hot ...

  9. SSISDB3：Environments 和 Environment Variables

    Environment 是ETL执行时使用的Parameters的集合,可以为一个Project引用不同的Environment variables,从而改变ETL执行的属性. 查看Environme ...

  10. SQL Server 解读【已分区索引的特殊指导原则】（2）- 唯一索引分区

    一.前言 在MSDN上看到一篇关于SQL Server 表分区的文档:已分区索引的特殊指导原则,如果你对表分区没有实战经验的话是比较难理解文档里面描述的意思.这里我就里面的一些概念进行讲解,方便大家的 ...