只需一句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. Spring Cloud(九)：分布式配置中心和消息总线

    我们在Spring Cloud(七):使用SVN存储分布式配置中心文件和实现refresh中讲到,如果需要客户端获取到最新的配置信息需要执行refresh,我们可以利用webhook的机制每次提交代码 ...

  2. Ubuntu下如何检查文件的md5，sha-512码

    ubuntu自带程序md5sum,sha512sum md5sum filename sha512sum filename 即可.

  3. etcd+calico集群的部署

    etcd单机模式 设置环境变量 1 export HostIP="192.168.12.50" 执行如下命令,打开etcd的客户端连接端口4001和2379.etcd互联端口238 ...

  4. 0070 过滤器调用Spring的bean操作数据库

    假设有这样的需求:将用户每次请求的ip.时间.请求.user-agent存入数据库,很明显可以用过滤器实现,在过滤器中获取到这些数据调用mybatis的mapper存入数据库,但问题来了:mybati ...

  5. 使用【单独】的一个<script>进行js文件的引用

    刚才用jQuery的时候,总是发现js代码不被执行...后来发现我的代码是这么写的: <script type="text/javascript" src="htt ...

  6. dp之多重背包poj2392

    题意:有k种石头,高为hi,在不超过ai的高度下,这种石头可以放置,有ci种这个石头,求这些石头所能放置的最高高度......... 思路:以往的什么硬币种数,最大硬币数之类的,他们的硬币都已经是排好 ...

  7. C - The C Answer (2nd Edition) - Exercise 1-2

    /* Experiment to find out what happens when printf's argument string contains \c, where c is some ch ...

  8. Unix系统编程（）改变信号处置：signal

    Unix系统提供了两种方法来改变信号处置:signal和sigaction.这篇描述的是signal系统调用,是设置信号处理的原始API,所提供的接口比sigaction简单.另一方面,sigacti ...

  9. Desugar Scala(15) -- unapply和unapplySeq方法

    欢迎关注我的新博客地址:http://cuipengfei.me/ 实在想不到什么动词可以当做脱衣服来讲了,所以从现在开始这系列博文就叫做Desugar Scala了.除非哪天才思泉涌,又想到了新词: ...

  10. jQuery 插件设置cookie

    对cookies的操作在当访问一个网站就无时无刻的都伴随着我们,记录着我们的一举一动,并将不危害用户隐私的信息,将以保存,这样用户就不用去从新再次操作重复的步骤,这样大大方便了客户,也增加了客户对网站 ...