一句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制作loading动画效果 loading效果
Jan 14 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 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
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
python对数组进行反转的方法
2015/05/20 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
如何执行一个shell程序
2012/11/23 面试题
酒店led欢迎词
2014/01/09 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
水电工岗位职责
2015/02/14 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
css样式important规则的正确使用方式
2022/06/10 HTML / CSS