这是工作遇到scrollTop() 方法。为了强化自己，把它记录在博客园当中。

下面就开始scrollTop 用法讲解：

scrollTop() 定义和用法

scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。

Note：

当滚动条位置位于最顶部时，位置是0；
当用于返回位置时：
    该方法返回 第一个匹配元素的滚动条的垂直位置。
当用于设置位置时：
    该方法设置 所有匹配元素的滚动条的垂直位置。

scrollTop() 语法

返回滚动条位置

$(selector).scrollTop()

设置滚动条位置

$(selector).scrollTop(position)

参数position ： 规定以像素为单位的垂直滚动条位置。

scrollTop() 实例

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("div").scrollTop()+" px");
});

需要注意的是，这里的数值不能加引号。也不用加px.   只需要给数值就可以了

$("#btn").click(function(){
$("div").scrollTop(60));
});
});
</script>
</head>
<body>

<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div><br>

<button>Return the vertical position of the scrollbar</button>

<button id="btn">Return the vertical position of the scrollbar</button>
<p>Move the scrollbar down and click the button again.</p>

</body>
</html>

深度理解Jquery 中 scrollTop() 方法的更多相关文章

  1. 深度理解Jquery 中 offset() 方法

    参考原文:深度理解Jquery 中 offset() 方法

  2. 解析jQuery中extend方法--源码解析以及递归的过程《二》

    源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...

  3. jquery中end()方法的解释

    来源:http://www.jquery001.com/jquery-end-method.html 对于end()方法,jQuery文档是这样解释的:jQuery回到最近的一个"破坏性&q ...

  4. ajax和springmvc的请求响应原理——深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    1,四大重要部分: 请求链接 post请求和get请求 请求参数形式 响应内容形式 2,从springmvc的controller角度,controller能接收到请求的前提 请求链接必须对应 pos ...

  5. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  6. jQuery中attr()方法用法实例

    本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...

  7. 使用jquery中height()方法获取各种高度大全

    alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(docum ...

  8. 锋利的jQuery读书笔记---jQuery中Ajax--load方法

    第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  9. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

随机推荐

  1. shopping car 1.0

    #!/usr/bin/env python# -*- coding: utf-8 -*-# @File : 20180510001.py# @Author: Anthony.waa# @Date : ...

  2. Codeforces Round #450

    Find Extra One Solution Position in Fraction Solution Remove Extra One f[i]表示删掉i能增加的record数目 从左到右处理, ...

  3. DataTable和DataRow和DataColumn ~~~~~~~~~~[][]

    DataSet.Tables[0].Rows[0][1]表示DataSet中第一张表(因为Tables[0]就是第一张表的意思)中第一行(Rows[0][]) 第二列(Rows[][1])的数据. D ...

  4. 开源作品-PHP写的在线文件管理工具(单文件绿色版)-SuExplorer_PHP_3_0

    前言:项目开发过程中,网站一般部署到远程服务器,所以文件管理就不能和本机操作一样方便.通常文件管理是用ftp下载到本地,修改后再上传,或者远程登录到服务器进行修改.但是这些操作都依赖于复杂的第三方软件 ...

  5. wp7图片上传服务器

    做一个wp7手机上传图片到服务器的功能,具体丝路是在手机端做一个照相或者选择图片的功能,点击上传,在服务器端做一个一般处理程序,接受上传的文件,存入文件夹,下面是主要代码: 手机端代码: /// &l ...

  6. CaptCha的现状与未来

    2011年的老文.................转自于伯乐在线:http://blog.jobbole.com/4655/       有一个机会,朋友推荐一个创业的哥们给我认识,方向就是验证码识别 ...

  7. Java之关于面向对象

    面向对象,呃,别给我说程序员找不到对象,那是windows才会出现的情况~~~ 就简单记下笔记什么的吧. 1.关于定义和赋值 之前总是搞混淆,说到底是没有搞清楚. shit bigOne=new sh ...

  8. 读书笔记「Python编程：从入门到实践」_3.列表简介

    3.1 列表是什么 列表 由一系列按特定顺序排列的元素组成. 在Python中,用方括号([] )来表示列表,并用逗号来分隔其中的元素. 3.1.1 访问列表元素 指出列表的名称,再指出元素的索引   ...

  9. 04--C语言文件操作函数大全(超详细)

    fopen(打开文件)相关函数 open,fclose表头文件 #include<stdio.h>定义函数 FILE * fopen(const char * path,const cha ...

  10. RxSwiftライブラリの作り方 〜Observer/Observable編〜

    RxSwiftライブラリの作り方をご紹介します.一つの記事ですべてを説明するのは非常に厳しいので.まず Observer や Observable といった基本的なコンポーネントとその周辺について.ひ ...