基于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 ready和load事件的区别示例介绍
Aug 30 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
js中for in的用法示例解析
Dec 25 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
vuex与组件联合使用的方法
May 10 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
WEB前端性能优化的7大手段详解
Feb 04 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加密解密示例分享
2014/01/29 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
解析Python3中的Import
2019/10/13 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
物流经理自我评价
2013/09/23 职场文书
工作岗位说明书模板
2014/05/09 职场文书
校园广播稿100字
2014/10/06 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
安全承诺书格式范本
2015/04/28 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
SQL Server中使用表变量和临时表
2022/05/20 SQL Server