脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery返回顶部

基于jQuery实现返回顶部实例代码

 更新时间：2016年01月01日 10:12:51   作者：roucheng  
这篇文章主要介绍了基于jQuery实现返回顶部实例代码的相关资料,需要的朋友可以参考下

效果图展示如下所示：


使用方法：

只需引用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">&copy; 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>

以上内容是给大家分享基于jQuery实现返回顶部实例代码，希望大家喜欢。

您可能感兴趣的文章:

相关文章

  • jQuery实现复选框批量选择与反选的方法

    jQuery实现复选框批量选择与反选的方法

    这篇文章主要介绍了jQuery实现复选框批量选择与反选的方法,主要通过jQuery的attr与removeAttr方法实现选择与反选的功能,非常具有实用价值,需要的朋友可以参考下
    2015-06-06
  • 一个背景云变换js特效 鼠标移动背景云变化

    一个背景云变换js特效 鼠标移动背景云变化

    分享一个背景云变换js特效随着鼠标的移动，背景云会不断的变化位置和形状,感兴趣的朋友可以研究下
    2012-12-12
  • JQuery打造省市下拉框联动效果

    JQuery打造省市下拉框联动效果

    考虑将需要动态刷新的内容自动拼接到前一个下拉框之后等等，用JQuery实现比较容易，代码以省市联动效果为例实现
    2014-05-05
  • 基于Jquery插件实现跨域异步上传文件功能

    基于Jquery插件实现跨域异步上传文件功能

    这篇文章主要介绍了基于Jquery插件实现跨域异步上传文件功能的相关资料,需要的朋友可以参考下
    2016-04-04
  • jquery animate实现鼠标放上去显示离开隐藏效果

    jquery animate实现鼠标放上去显示离开隐藏效果

    本文为大家介绍下使用jquery animate实现鼠标放上去显示,离开就隐藏的效果，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-07-07
  • jquery实现简单的swiper轮播预览原图

    jquery实现简单的swiper轮播预览原图

    这篇文章主要为大家详细介绍了jquery实现简单的swiper轮播预览原图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • jQuery load方法用法集锦

    jQuery load方法用法集锦

    jQuery load方法用法集锦,学习jquery的朋友可以参考下。
    2011-12-12
  • Jquery之美中不足小结

    Jquery之美中不足小结

    在QWrap群里讨论时，有同学问jquery/yui等已做到极致，我们有没必要再重复造一个叫QWrap的轮子？
    2011-02-02
  • 无需 Flash 使用 jQuery 复制文字到剪贴板

    无需 Flash 使用 jQuery 复制文字到剪贴板

    需要做的只是引入其脚本，在HTML标签上赋一个“data-clipboard-target”属性然后写一小段JavaScript片段。为了演示假定有一个货币转换应用，在一个文本框中输入数值时同时将兑换结果显示在另一个文本框中，当点击文本框时，会触发事件将其复制到剪贴板然后显示一条消息。
    2016-04-04
  • jQuery鼠标事件汇总

    jQuery鼠标事件汇总

    鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法
    2015-08-08

最新评论