基于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 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
详解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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
Redux实现组合计数器的示例代码
2018/07/04 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python实现的堆排序算法示例
2018/04/29 Python
python实现日志按天分割
2019/07/22 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
大学班级文化建设方案
2014/05/06 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
公司借条范本
2015/05/25 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技