一句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 相关文章推荐
基于jquery自定义图片热区效果
Jul 21 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
你准备好迎接vue3.0了吗
Apr 28 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
MySQL修改密码方法总结
2008/03/25 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
EsLint入门学习教程
2017/02/17 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Python中six模块基础用法
2019/12/08 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
护理专业本科生自荐信
2013/10/01 职场文书
给排水工程师岗位职责
2013/11/21 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
优秀教师主要事迹
2014/02/01 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
公司股份合作协议书
2014/12/07 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python