下拉框实例：

<!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. CentOS7 离线安装gcc/pcre-devel/openssl-devel/zlib-devel

    1. 解压CentOS7操作系统安装镜像,进入到CentOS-7.0-1406-x86_64-DVD\Packages目录,这下面存储了很多rpm包. 2. 找到下面列出的rpm包,上传到CentOS ...

  2. ubuntu 使用apt-get install 安装php5.6--php7

    使用ppa增加源:$ sudo apt-get install python-software-properties $ sudo add-apt-repository ppa:ondrej/php ...

  3. PyQt5+python3+pycharm开发环境配置

    1.下载PyQt https://sourceforge.net/projects/pyqt/files/PyQt5/PyQt-5.6/PyQt5-5.6-gpl-Py3.5-Qt5.6.0-x32- ...

  4. bat脚本-set(setlocal enabledelayedexpansion) 学习

    设置本地为延迟扩展.其实也就是:延迟变量,全称延迟环境变量扩展. 事件一: @echo off set a=4 set a=5&echo %a% pause 解说:为什么是4而不是5呢?在ec ...

  5. WebForm 文件上传

    //Button1的点击事件 //FileUpload1.FileName为所传文件的名字. //以DateTime.Now.ToString("yyyyMMddhhmmssms" ...

  6. OpenGL编译问题随手记

    1.error C2381: "exit" : 重定义:__declspec(noreturn) 不同 编译OpenGL   Red   Book   的例子时出现错误, stdl ...

  7. Ajax.BeginForm无法调用 ajaxOptions的js函数

    使用ajax.beginForm无法调用ajaxOptions的js函数的原因,一般都是缺少以下2个JS文件: 1,Install-Package jQuery –version 1.10.22,In ...

  8. [Q]无矩形外框块参照图形的识别

    该图纸的图框由块参照组成,其外侧图框不是矩形 使用默认设置无法正确识别,需要做以下修改:不勾选“块/外部参照”,勾选“块/外部参照边界”,勾选“制定块”并选择图框(块参照).

  9. Java Socket编程基础(1)

    参考资料: <Java网络编程精解> 孙卫琴 一.socket通信简介 什么是socket,简单来说,在linux系统上,进程与进程之间的通信称为IPC,在同一台计算机中,进程与进程之间通 ...

  10. 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 转载

    最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没 ...