编程 Javascript

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

Posted in Javascript onJanuary 01, 2016

效果图展示如下所示：

基于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">© 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实现返回顶部实例代码

- Author -

roucheng

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript开发中因空格引发的错误

Nov 08 Javascript

open 动态修改img的onclick事件示例代码

Nov 13 Javascript

js this函数调用无需再次抓获id，name或标签名

Mar 03 Javascript

jQuery对指定元素中指定字符串进行替换的方法

Mar 17 Javascript

jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享

Aug 20 Javascript

bootstrap布局中input输入框右侧图标点击功能

May 16 Javascript

jquery siblings获取同辈元素用法实例分析

Jul 25 Javascript

JavaScript数据结构之二叉树的计数算法示例

Apr 13 Javascript

jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析

Jul 25 jQuery

默认浏览器设置及vue自动打开页面的方法

Sep 21 Javascript

Angular8基础应用之表单及其验证

Aug 11 Javascript

浅谈vue中get请求解决传输数据是数组格式的问题

Aug 03 Javascript

详解JavaScript 中的 replace 方法

Jan 01 #Javascript

基于JavaScript实现定时跳转到指定页面

Jan 01 #Javascript

Javascript获取数组中的最大值和最小值的方法汇总

Jan 01 #Javascript

实例详解JavaScript获取链接参数的方法

Jan 01 #Javascript

快速学习AngularJs HTTP响应拦截器

Dec 31 #Javascript

常见的javascript跨域通信方法

Dec 31 #Javascript

javascript实现input file上传图片预览效果

Dec 31 #Javascript