一句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操作xml
Nov 04 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
js动态设置div的值下例子
Oct 29 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 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 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
万能的php分页类
2017/07/06 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
React中的refs的使用教程
2018/02/13 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python单例模式的两种实现方法
2017/08/14 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
使用python爬取B站千万级数据
2018/06/08 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python操作文件的参数整理
2019/06/11 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
pandas分批读取大数据集教程
2020/06/06 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
工艺工程师岗位职责
2014/03/04 职场文书
财产保全担保书范文
2014/04/01 职场文书
电子专业求职信
2014/06/19 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
深度学习详解之初试机器学习
2021/04/14 Python