一句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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
JavaScript中string对象
Jun 12 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
详解微信小程序开发用户授权登陆
Apr 24 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
微信自定义分享php代码分析
2016/11/24 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
php新建文件的方法实例
2019/09/26 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
vuex的简单使用教程
2018/02/02 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
python中list列表的高级函数
2016/05/17 Python
Python中一行和多行import模块问题
2018/04/01 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
通过实例了解python property属性
2019/11/01 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
科学发展观演讲稿
2014/09/11 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
2014年政工师工作总结
2014/12/18 职场文书
团代会开幕词
2015/01/28 职场文书
行政司机岗位职责
2015/04/10 职场文书
超市店长竞聘书
2015/09/15 职场文书
《绝招》教学反思
2016/02/20 职场文书