一句jQuery代码实现返回顶部效果(简单实用)


Posted in Javascript onDecember 28, 2016

使用方法:

只需引用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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 #Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 #Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 #Javascript
基于JS设计12306登录页面
Dec 28 #Javascript
JS实现搜索框文字可删除功能
Dec 28 #Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 #Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 #Javascript
You might like
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
python列表返回重复数据的下标
2020/02/10 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
python中温度单位转换的实例方法
2020/12/27 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
两道JAVA笔试题
2016/09/14 面试题
幼儿园开学寄语
2014/04/03 职场文书
反邪教警示教育方案
2014/05/13 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript