一句jQuery代码返回顶部

效果体验：

http://hovertree.com/texiao/yestop/

使用方法：

只需引用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>

更多：http://www.cnblogs.com/roucheng/p/texiao.html

一句jQuery代码返回顶部的更多相关文章

  1. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  2. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  3. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  4. jQuery 一句代码返回顶部

    兼容各大主流浏览器,jQuery返回顶部,一句代码搞定 <a class="top" href="javascript:;" style="po ...

  5. 用Jquery写返回顶部代码

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>jq ...

  6. 简单的JQuery top返回顶部

    一个最简单的JQuery Top返回的代码,Mark一下: HTML如下: <div id="backtop"> <a href="javascript ...

  7. 使用jquery实现返回顶部按钮

    实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...

  8. jquery 实现 返回顶部

      //Html代码: <div class="backToTop" title="返回顶部">返回顶部</div> //代码 //CS ...

  9. 转载：jQuery实现返回顶部功能

    转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图   ...

随机推荐

  1. 启动App的Intent

    类似桌面图标打开App的Intent 程序中需要一种通知,点击后的效果需要像点击桌面图标那样: 程序在前台就什么也不干. 程序在后台,就切换到前台. 程序未启动,就启动程序. 点击通知后,通知本身跳转 ...

  2. 一步一步学ROP之linux_x86篇

    一步一步学ROP之linux_x86篇 作者:蒸米@阿里聚安全 ​ 一.序 ROP的全称为Return-oriented programming(返回导向编程),这是一种高级的内存攻击技术可以用来绕过 ...

  3. 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/58212d0fa7a7574c4f4cc3c5 作者:peggy 小程序概述 1 ...

  4. Lesson 10 Not for jazz

    Text We have an old musical instrument. It is called a clavichord. It was made in Germany in 1681. O ...

  5. Hadoop学习笔记—15.HBase框架学习（基础知识篇）

    HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase是一个开源的,分布式的,多版本的,面向列的存储模型,它存储的是 ...

  6. spring事务管理器设计思想（一）

    在最近做的一个项目里面,涉及到多数据源的操作,比较特殊的是,这多个数据库的表结构完全相同,由于我们使用的ibatis框架作为持久化层,为了防止每一个数据源都配置一套规则,所以重新实现了数据源,根据线程 ...

  7. 【玩转单片机系列001】 08接口双色LED显示屏驱动方式探索

    前些日子,从淘宝上购得一块08接口的双色LED显示屏(打算做个音乐频谱显示器),捣鼓了好几天,终于搞清楚了其控制原理,在这里做个总结,算是备忘吧. 1.LED显示屏的扫描方式 LED显示屏的扫描方式有 ...

  8. Leetcode-83 Remove Duplicates from Sorted List

    #83. Remove Duplicates from Sorted List Given a sorted linked list, delete all duplicates such that ...

  9. LINQ系列：Linq to Object元素操作符

    元素操作符从一个序列返回单个指定的元素. 1. DefaultIfEmpty DefaultIfEmpty操作符将一个空集合替换为包含默认的单个值的集合.在返回序列为空且又需要返回一些对象时,可以通过 ...

  10. SqlServer用sql对表名、字段做修改

    1.重命名表  下例将表 users重命名为 userdd.  EXEC sp_rename 'users', 'userdd'  2. 重命名列  下例将表 userdd中的列 sex 重命名为 s ...