一句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 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
vue 项目地址去掉 #的方法
Oct 20 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 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
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
浅谈PHP的反射API
2017/02/26 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
20个常用Python运维库和模块
2018/02/12 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
大学同学聚会邀请函
2014/01/29 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
入党个人总结范文
2015/03/02 职场文书
体检通知范文
2015/04/21 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python