一句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基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
微信小程序动态添加和删除组件的现实
Feb 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
图书管理程序(二)
2006/10/09 PHP
PHP cron中的批处理
2008/09/16 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
PHP生成唯一订单号
2015/07/05 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
js 分栏效果实现代码
2009/08/29 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
全球性的女装店:storets
2019/06/12 全球购物
SQL中where和having的区别
2012/06/17 面试题
深圳茁壮笔试题
2015/05/28 面试题
领导失职检讨书
2014/02/24 职场文书
医院保洁服务方案
2014/06/11 职场文书
交通志愿者活动总结
2014/06/27 职场文书
异地年检委托书范本
2014/09/24 职场文书
2014年大学生工作总结
2014/11/20 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL