下拉框实例：

<!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. 如何通过fpmmm和zabbix来监控客户机上MariaDB数据库运行情况

    首先在客户机安装MariaDB和zabbix,参考上一篇 安装fpmmm的过程主要参考[1]. 安装fpmmm的依赖 shell> yum install php-cli php-process ...

  2. maven初步入门demo

    Maven是跨平台的项目管理工具.作为Apache组织中的一个颇为成功的开源项目,主要服务于基于java平台的项目构建.依赖管理和项目信息管理. maven本身使用java开发而成,所以使用前确保电脑 ...

  3. Leetcode easy

    1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to a ...

  4. iOS ARC与MRC混编的一些解决方法

    1. ARC & MRC 混合开发 在项目开发中,遇到使用MRC开发的第三方库怎么办? 例如:ASI 1> 尝试使用Xcode的转换工具(失败率比较高) 2> 在编译选项中,为MR ...

  5. libvirt里的面向对象的C语言

    C语言:类的声明和定义 // 通用父类的定义 struct _virClass { virClassPtr parent; unsigned int magic; char *name; size_t ...

  6. request获取ip

    public static String getIp(HttpServletRequest request) { String ip = request.getHeader("x-forwa ...

  7. [河南省ACM省赛-第四届] 表达式求值(nyoj 305)

    栈的模拟应用: #include<iostream> #include<cstdio> #include<cstring> #include<string&g ...

  8. C# 语言规范_版本5.0 (第6章 转换)

    1. 转换 转换(conversion) 使表达式可以被视为一种特定类型.转换可导致将给定类型的表达式视为具有不同的类型,或其可导致没有类型的表达式获得一种类型.转换可以是隐式的 (implicit) ...

  9. 前端环境安装（node.js+npm+grunt+bower）

    前端开发环境安装(本教程不带开发工具的安装教程,只是环境安装) 本人机器环境win7 64位. 一．node.js安装 进入官网下载node.js文件,http://www.nodejs.org/ 2 ...

  10. 【git】TurtoiseGit使用手册

    A,创建本地分支 操作:Create Branch ->输入本地分支名 -> OK B,创建本地分支和远程分支的映射 操作: 1,拉取远程分支:Fetch -> 选中Arbitray ...