一句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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
domReady的实现案例
Nov 23 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
antd配置config-overrides.js文件的操作
Oct 31 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
生成静态页面的PHP类
2006/11/25 PHP
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
类似框架的js代码
2006/11/09 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
Python部署web开发程序的几种方法
2017/05/05 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
python中安装django模块的方法
2020/03/12 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
python 对xml解析的示例
2021/02/27 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
电子信息专业学生自荐信
2013/11/09 职场文书
英文版销售经理个人求职信
2013/11/20 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python