一句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显示用户停留时间的简单实例
Aug 05 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
微信小程序 checkbox使用实例解析
Sep 09 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
PHP多进程简单实例小结
2019/11/09 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
python类定义的讲解
2013/11/01 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
详解django自定义中间件处理
2018/11/21 Python
python3对接mysql数据库实例详解
2019/04/30 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
基于python实现坦克大战游戏
2020/10/27 Python
python使用smtplib模块发送邮件
2020/12/17 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
森林病虫害防治方案
2014/06/02 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
Django中celery的使用项目实例
2022/07/07 Python