基于jQuery实现返回顶部实例代码


Posted in Javascript onJanuary 01, 2016

效果图展示如下所示:

基于jQuery实现返回顶部实例代码

使用方法:

只需引用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">© 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实现返回顶部实例代码,希望大家喜欢。

Javascript 相关文章推荐
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
jquery动态添加option示例
Dec 30 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
JavaScript函数模式详解
Nov 07 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
详解Vue单元测试case写法
May 24 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
详解JavaScript 中的 replace 方法
Jan 01 #Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 #Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 #Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 #Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 #Javascript
常见的javascript跨域通信方法
Dec 31 #Javascript
javascript实现input file上传图片预览效果
Dec 31 #Javascript
You might like
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
php文件上传类的分享
2017/07/06 PHP
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python help()函数用法详解
2014/03/11 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
windows下python安装小白入门教程
2018/09/18 Python
python实现简单成绩录入系统
2019/09/19 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
自荐信格式的六要素
2013/09/21 职场文书
物流专业求职计划书
2014/01/10 职场文书
高二生物教学反思
2014/01/27 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
总结表彰大会主持词
2014/03/26 职场文书
市场营销工作计划书
2014/05/06 职场文书
信访工作经验交流材料
2014/05/23 职场文书
大学生赌博检讨书
2014/09/22 职场文书
《草船借箭》教学反思
2016/02/23 职场文书