一句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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
js模糊查询实例分享
Dec 26 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
js实现带积分弹球小游戏
Jul 21 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
自己做矿石收音机
2021/03/02 无线电
数据库中排序的对比及使用条件详解
2012/02/23 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
jquery实现心算练习代码
2010/12/06 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
python实现调用其他python脚本的方法
2014/10/05 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
CSS3 简写animation
2012/05/10 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
机电专业体育教师求职信
2013/09/21 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
初中班干部工作总结
2015/08/10 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python