只需一句jQuery代码实现返回顶部
效果体验：
http://hovertree.com/texiao/yestop/

使用方法：
只需引用jQuery库和YesTop插件(jquery.yestop.js)，然后一句代码就可以实现返回顶部：
引用代码：
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script src="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script>

使用代码：<script>
$(document).ready(function () { $.fn.yestop(); })
</script>

也就是：
$.fn.yestop();

这句代码就可以了。
当然还有高级的设置，如换图片，设置图标为圆形，设置位置，设置时间等等。
例如：

$.fn.yestop({
"yes_image": "http://hovertree.com/texiao/yestop/inc/yestoprocket.png"
, "yes_width": "48px", "yes_height": "125px" , "yes_time": 200
,"yes_bottom":"20px","yes_right":"10px"
});

详情请查看其他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>

jQuery返回顶部实用插件YesTop的更多相关文章

  1. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  2. jQuery返回顶部（精简版）

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  3. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  4. Jquery返回顶部插件

    自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...

  5. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  6. jquery返回顶部特效

    <style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...

  7. jquery返回顶部

    // 返回顶部 var fixed_totop = $('.back_top').on('click',function(){ $('html, body').animate({scrollTop: ...

  8. Jquery 返回顶部

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. jQuery返回顶部代码

    页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...

随机推荐

  1. JavaScript之Web通讯

    web通信,一个特别大的topic,涉及面也是很广的.因最近学习了 javascript 中一些 web 通信知识,在这里总结下.文中应该会有理解错误或者表述不清晰的地方,还望斧正! 一.前言 1. ...

  2. IOS基于XMPP协议开发－－XMPPFramewok框架（一）：基础知识

    最近蘑菇街团队的TT的开源,使我对im产生了兴趣,然后在网上找到了XMPPFramework进行学习研究, 并写了以下系列教程供大家参考,有写的不对的地方,请大家多多包涵指正. 目录索引 IOS基于X ...

  3. JQuery实现选择特定楼层回复

    JQuery实现选择特定楼层回复 需求: 一个论坛里面的小功能,除了回复帖子之外,也能够回复帖子以下的回复.详细实现细节: 每个回复有一个"回复"按钮,点击按钮实现: 在form表 ...

  4. Atitit.注重细节还是关注长远？？长远优先

    Atitit.注重细节还是关注长远??长远优先 1. 注重细节的误区 1 1.1. 如果连aaa都做不好,那么怎么能够相信你ccc 2 1.2. 一屋不扫何以扫天下??但是扫大街的都是保洁员 2 2. ...

  5. location 设定某个文件的过期时间，并不记录访问日志

    网页的根目录本来是: 6 root /app/www/default; [root@web01 default]# cat /app/server/nginx/conf/vhosts/default. ...

  6. Storyboard 全解析

    XCode 4.3.2 新功能 - Storyboard 最近开始比较有空在玩 XCode 4.3.2,赫然发现它多了个 Storyboard 的东东. Storyboard 这个东西一般来说是在做创 ...

  7. hdu1978（记忆化搜索）

    #include<iostream> #include<stdio.h> #include<string.h> #include<queue> usin ...

  8. 关于js中__proto__和prototype的一些理解<转>

    var Person = function(name) {     this.name = name; } var p = new Person(); new操作符的操作是 var p = {} p. ...

  9. myeclipse 上安装 Maven3<转>

    环境准备: JDK 1.6 Maven 3.0.4 myeclipse 8.6.1 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Maven是 Apache 下的一个项目,目前最新版 ...

  10. TF Boys (TensorFlow Boys ) 养成记（三）： TensorFlow 变量共享

    上次说到了 TensorFlow 从文件读取数据,这次我们来谈一谈变量共享的问题. 为什么要共享变量?我举个简单的例子:例如,当我们研究生成对抗网络GAN的时候,判别器的任务是,如果接收到的是生成器生 ...