一句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. 一个哥们看到数据库日志不断增大 [log_reuse_wait_desc]为replication 之后的做法

    一哥们看到数据库日志不断增大 [log_reuse_wait_desc]为replication 之后的做法 一天那个哥们看到数据库日志暴涨,用sys.databases 视图看一下[log_reus ...

  2. ASP.NET SignalR 高可用设计

    在 One ASP.NET 的架构图中,微软将 WebAPI 和 SignalR 归类到 Services 类型与 MVC.Web Forms 同列为一等公民,未来的 ASP.NET 5 尽管还在be ...

  3. Kotlin笔记

    官网: http://kotlinlang.org/ http://kotlinlang.org/docs/reference/ 中文教程: http://kotlindoc.com/ Gradle: ...

  4. 循序渐进做项目系列（5）：制作安装包，谁人都可以！——VS制作安装包简明教程

    一开始让我做安装包的时候,其实我是拒绝的.因为我根本就不会做安装包.查了资料之后,我很懵,很晕,很乱,因为不清晰,不简明,不直白.然而经过一番彷徨的挣扎,我终于发现:制作安装包,谁人都可以!故挥狼毫, ...

  5. 一个App完成入门篇（六）- 完成通讯录页面

    第五章和第六章间隔时间有点长,对不起大家了.下面继续. 本节教程将要教会大家如何加载本地通讯录. 导入项目 导入通讯录 自定义js模块 发送和订阅page消息 将要学习的demo效果图如下所示 1. ...

  6. 多线程中的锁系统(三)-WaitHandle、AutoResetEvent、ManualResetEvent

    本章主要介绍下基于内核模式构造的线程同步方式,事件,信号量. 阅读目录: 理论 WaitHandle AutoResetEvent ManualResetEvent 总结 理论 Windows的线程同 ...

  7. R in Action 读书笔记（4）

    MindMapper 原文件

  8. 在.NET中使用管道将输出流转换为输入流

    最近在写一段代码,将本地文件压缩加密后发送到服务器,发送到服务器的类用一个输入流作为参数获取要上传的数据,而压缩类和加密类都是输出流. 如何将输出流转换为输入流,最直观的方法是缓存输出流的全部内容到内 ...

  9. C#设计模式之装饰者

    IronMan之装饰者 前言 上一篇的文章我们讲到要给"IronMan"配备"武器",并且还使用了"武器",效果还是不错的,对于多种环境.多 ...

  10. C语言 · 查找整数

    问题描述 给出一个包含n个整数的数列,问整数a在数列中的第一次出现是第几个. 输入格式 第一行包含一个整数n. 第二行包含n个非负整数,为给定的数列,数列中的每个数都不大于10000. 第三行包含一个 ...