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" ...
随机推荐
- python3.x +django + nginx + uwsgi 搭建web服务
最近一直在用django开发自己的网站.在开发和线上环境的对接过程中遇到了许多的坑.所以想以一个老鸟的经历来写一下怎么 搭建web服务 一.python3.x .django .nginx .uwsg ...
- sysbench的安装详解
sysbench是一个压力测试工具.可以用它来测试cpu.mem.disk.thread.mysql.postgr.oracle:然而作为一个mysql dba 我当然是用它来压测mysql啦! 一. ...
- Apache重启报警,不存在虚拟主机目录(httpd.conf打开了一些扩展)
Apache重启时报警: AH00112: Warning: DocumentRoot [/usr/local/apache/docs/dummy-host.example.com] does not ...
- mysql误删root用户或者忘记root密码解决方法
解决方法一: 到其他安装了Mysql的服务器(前提是要知道该服务器上Mysql的root用户密 码),打开[Mysql的安装目录/var/mysql],将其中的user.frm.user.MYD.us ...
- [Jobdu] 题目1493:公约数
题目描述: 给定两个正整数a,b(1<=a,b<=100000000),计算他们公约数的个数.如给定正整数8和16,他们的公约数有:1.2.4.8,所以输出为4. 输入: 输入包含多组测试 ...
- 366. Fibonacci【Naive】
Find the Nth number in Fibonacci sequence. A Fibonacci sequence is defined as follow: The first two ...
- 【C语言】19-static和extern关键字1-对函数的作用
一.extern与函数 在前面我提到过一句话:如果一个程序中有多个源文件(.c),编译成功会生成对应的多个目标文件(.obj),这些目标文件还不能单独运行,因为这些目标文件之间可能会有关联,比如a.o ...
- ssm开发系的统架构图
- linux中mysql安装的问题
Starting MySQL.Manager of pid-file quit without updating file.[FAILED] 已解决 这是由于系统中/etc/my.cnf文件本身存在或 ...
- Unicode Table
Unicode Table http://www.tamasoft.co.jp/en/general-info/unicode.html 00 01 02 03 04 05 06 07 08 09 ...