下拉框实例：

<!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. nodeValue、firstChild和lastChild属性

    nodeValue属性如果想改变一个文本节点的值,那就使用DOM提供的nodeValue属性,他用来得到(和设置)一个节点的值:node.nodeValue但是有个细节必须注意:在用nodeValue ...

  2. PHP不使用递归的无限级分类

    不用递归实现无限级分类,简单测试了下性能比递归稍好一点点点,但写得太复杂了,还是递归简单方便点 代码: <?php $list = array( array('id'=>1, 'pid'= ...

  3. hdu1034

    #include<stdio.h>const int MAXN=1000;int a[MAXN];int main(){ int n; int i; while(scanf("% ...

  4. vue跨组件通信的几种方法

    http://www.tuicool.com/articles/jyM32mA 在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了 ...

  5. C语言之字符串典型例题解析

    今天又遇见几个好题,和以前的一些凑一块写一篇文章,作为我延迟去自习室的一个借口吧. 首先是第一题 int fun(char* s){ char* t = s; while(*t++); return ...

  6. 《Intel汇编第5版》 汇编拷贝字符串

    一.字符串定义 二.dup指令 三.调用Writestring过程 四.代码以及效果 TITLE String Copy INCLUDE Irvine32.inc includelib Irvine3 ...

  7. Action3D

    抖动效果-Shaky3D 波浪效果-Waves3D 翻转效果-FlipX3D 凸镜效果-Ripple3D 液体效果-Liquid 扭动效果-Twirl 破碎效果-ShatteredTiles3D 瓷砖 ...

  8. Intelli IDEA 使用教程

    1.怎样修改字体 File-Settings-color&Fonts-Fonts

  9. CVE-2015-5122 简要分析(2016.4)

    CVE-2015-5122 简要分析 背景 最近在学习Flash漏洞的分析,其与IE漏洞的分析还是有诸多的不同(不便)之处,折腾了一阵子终于克服了没有符号表.Flash的超时定时器等问题.所以找到了去 ...

  10. jquery 复选框

    jquery 选中复选框 $("input[type='checkbox']").prop("checked", true); jquery 判断复选框是否被选 ...