jQuery返回顶部实用插件YesTop
效果体验：
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">© 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的更多相关文章
- jquery返回顶部，支持手机
jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...
- jQuery返回顶部（精简版）
jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
- jquery返回顶部和底部插件和解决ie6下fixed插件
(function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...
- Jquery返回顶部插件
自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...
- jquery 返回顶部 兼容web移动
返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...
- jquery返回顶部特效
<style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...
- jquery返回顶部
// 返回顶部 var fixed_totop = $('.back_top').on('click',function(){ $('html, body').animate({scrollTop: ...
- Jquery 返回顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- jQuery返回顶部代码
页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...
随机推荐
- mybatis中sql语句传入多个参数方法
1 使用map <select id="selectRole" parameterType="map" resultType="RoleMap& ...
- Q_PROPERTY介绍
QT提供了一个成熟的属性系统,但是作为一个跨平台的且与编译器无关的库,qt不依赖于非标准的编译器功能例如 __property or [property]: QT的强大之处在于它可以支持任何标准的c+ ...
- MySQL存储过程使用实例详解
本文介绍关于在MySQL存储过程游标使用实例,包括简单游标使用与游标循环跳出等方法 例1.一个简单存储过程游标实例 DROP PROCEDURE IF EXISTS getUserInfo $$CRE ...
- 简明 Vim 练级攻略（转，有些动态图不能显示，请看转载处）
vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...
- 孙源即将分享 DynamicCocoa 实现细节
孙源即将分享 DynamicCocoa 实现细节 我的公众号之前发的一文中提到滴滴做了一个很牛逼的动态化方案 DynamicCocoa.该方案设计得非常精巧,解决了两种不同的语言在代码上如何等价生 ...
- CSS3多背景应用
/*多背景应用*/ .wrapper { width: 640px; height: 1000px; margin: auto; background: url(./images/head.jpg) ...
- js eval深入
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
- 解决select菜单边框无法设置的问题
<span style="border:1px solid green; position:absolute; overflow:hidden"><select ...
- QTableWidget与QTableView的区别
QTableWidget继承自QTableView.QSqlTableModel能与QTableView绑定,但不能于QTableWidget绑定 QSqlTableModel *model = ne ...
- 115个Java面试题和答案（上）
转自:http://www.importnew.com/10980.html 本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的 ...