一句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 相关文章推荐
js截取字符串的两种方法及区别详解
Nov 05 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
js canvas实现擦除动画
Jul 16 Javascript
js实现产品缩略图效果
Mar 10 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 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
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
PHP中的表达式简述
2016/05/29 PHP
不安全的常用的js写法
2009/09/15 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
python opencv实现图片旋转矩形分割
2018/07/26 Python
python中def是做什么的
2020/06/10 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
大学生个人简历中的自我评价
2013/12/27 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
高中班长竞选稿
2015/11/20 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL