基于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 相关文章推荐
单击某一段文字改写文本颜色
Jun 06 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
VueJS实现用户管理系统
May 29 Javascript
JavaScript如何操作css
Oct 24 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
详解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函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Python实现代码统计工具
2019/09/19 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
如何基于python实现归一化处理
2020/01/20 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
秘书专业自荐信范文
2013/12/26 职场文书
公司离职证明范本
2014/01/13 职场文书
中学生寄语大全
2014/04/03 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
刑事法律意见书
2015/06/04 职场文书
工作感想范文
2015/08/07 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript