下拉框实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .a{

            position: fixed;

            left: 0px;

            bottom: 0px;

        }

        .hide{

            display: none;  /*默认不出现返回顶部*/

        }

    </style>

</head>

<body>

    <div style="height: 1500px; background-color: #B0E0E6; overflow: auto;">    <!--overflow: auto;表示当高度大于页面高度时，使用下拉框-->

        <a class="a hide" onclick="gotop();">返回顶部</a>

        <div style="height: 500px; background-color: aqua; overflow: auto;">

            <p>1</p>

            <p>2</p>

            <p>3</p>

            <p>4</p>

            <p>1</p>

            <p>2</p>

            <p>3</p>

            <p>4</p>

            <p>1</p>

            <p>2</p>

            <p>3</p>

            <p>4</p>

            <p>1</p>

            <p>2</p>

            <p>3</p>

            <p>4</p>

            <p>1</p>

            <p>2</p>

            <p>3</p>

        </div>

    </div>

    <script src="jquery-2.2.4.js"></script>

    <script>

        function gotop(){

            $(window).scrollTop(0); //设置滑轮滚动距离为0

        }

        window.onscroll = function(){  //window.onscroll 监听鼠标滑轮事件，(鼠标滑轮滚动时执行function())

            if ($(window).scrollTop()>100){

                $('a').removeClass('hide');   //下拉框距顶部大于100，显示返回顶部按钮

            }else {

                $('a').addClass('hide');

            }

        }

    </script>

</body>

</html>

position()与offset()：

position()表示子标签与父标签(左上角)的偏移距离。

offset()表示标签与页面或屏幕(左上角)的偏移距离。

height()与width():获取自身的高度和宽度(裸)。

jQuery实例2的更多相关文章

  1. jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined

    jQuery实例--jQuery实现联动下拉列表查询框   在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...

  2. 值得 Web 开发人员学习的20个 jQuery 实例教程

    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...

  3. jQuery使用（十一）：jQuery实例遍历与索引

    each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element. ...

  4. 基础 jQuery 实例

    基础 jQuery 实例 jQuery 原则: 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: 把所有 jQuery 代码置于事件处理函 ...

  5. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  6. JSON和JSONP （含jQuery实例）（share）

    来源:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临两个问 ...

  7. jQuery实例属性和方法

    jQuery.fn = jQuery.prototype = {  //添加实例属性和方法   jquery : 版本   constructor : 修正指向问题   init() : 初始化和参数 ...

  8. JSONP 含jquery 实例

     前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...

  9. 【前端】:jQuery实例

    前言: 今天2月最后一天,写一篇jQuery的几个实例,算是之前前端知识的应用.写完这篇博客会做一个登陆界面+后台管理(i try...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: < ...

  10. :jQuery实例【DEMO】

    前言: 今天2月最后一天,写一篇jQuery的几个实例,算是之前前端知识的应用.写完这篇博客会做一个登陆界面+后台管理(i try...) 一.菜单实例 最开始的界面: 点击菜单三后的界面:   二. ...

随机推荐

  1. css技巧总结

    本文旨在记录css中比较特殊的属性的用法,先按项目的时间顺记录,以后再整理. a,input,button,select,textarea{ outline:none; -webkit-tap-hig ...

  2. Xcode打包framework脚本

    参考文章: http://www.jianshu.com/p/1cb4c4fe5481 https://gist.github.com/cromandini/1a9c4aeab27ca84f5d79 ...

  3. iOS二维码生成与识别

    在 IOS7 以前,在IOS中实现二维码和条形码扫描,有两大开源组件 ZBar 与 ZXing. 总结下各自的缺点: ZBar在扫描的灵敏度上,和内存的使用上相对于ZXing上都是较优的,但是对于 & ...

  4. find用法积累

    查找目录下的所有文件中是否含有某个字符串 find .|xargs grep -ri "IBM" 查找目录下的所有文件中是否含有某个字符串,并且只打印出文件名 find .|xar ...

  5. shrio初体验（2）Realm

    Realm:域,Shiro从从Realm获取安全数据(如用户.角色.权限),就是说SecurityManager要验证用户身份,那么它需要从Realm获取相应的用户进行比较以确定用户身份是否合法:也需 ...

  6. 【 VS 插件开发 】三、Vs插件简单功能的实现

    [ VS 插件开发 ]三.Vs插件简单功能的实现

  7. POJ 2761 Feed the dogs

    主席树,区间第$k$大. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> ...

  8. trove，测试，db小解析

    # Copyright 2014 Tesora Inc.# All Rights Reserved.## Licensed under the Apache License, Version 2.0 ...

  9. C++ static与单例模式

    单例模式是应用最多的一种设计模式,它要求系统中每个类有且只能有一个实例对象. 主要优点: 1.提供了对唯一实例的受控访问. 2.由于在系统内存中只存在一个对象,因此可以节约系统资源,对于一些需要频繁创 ...

  10. 移动app安全测试

    安全方面逐渐转向app安全,服务端app安全测试基本上跟常规的web方面挖掘差不多,只是增加了一个反编译或抓包的过程. 参考文献: http://drops.wooyun.org/tips/749 h ...