一句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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
浅析node.js中close事件
Nov 26 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
taro开发微信小程序的实践
May 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
PHP实现单例模式最安全的做法
2014/06/13 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
学生思想表现的评语
2014/01/30 职场文书
高中运动会入场词
2014/02/14 职场文书
党员教师工作决心书
2014/03/13 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
2016春节放假通知范文
2015/08/18 职场文书