基于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触发器详解
Mar 10 Javascript
JavaScript中的事件处理
Jan 16 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python文件和流(实例讲解)
2017/09/12 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
AUC计算方法与Python实现代码
2020/02/28 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
财务主管的岗位职责
2013/12/30 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书