一句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 相关文章推荐
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
初识javascript 文档碎片
Jul 13 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
基于小程序请求接口wx.request封装的类axios请求
Jul 02 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使用curl简单抓取远程url的方法
2015/03/13 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
详解Python中break语句的用法
2015/05/14 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
Python三级目录展示的实现方法
2016/09/28 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
理财学专业自荐书
2014/06/28 职场文书
个人查摆剖析材料
2014/10/04 职场文书
关于工作经历的证明书
2014/10/11 职场文书
党员个人整改措施
2014/10/24 职场文书
教师党员个人整改措施
2014/10/27 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
Golang bufio详细讲解
2022/04/21 Golang