这是工作遇到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. javascript中经典继承的兼容写法

    function create(obj) { // 2.1 判断浏览器支持不支持 Object.create // 如果支持,直接使用 Object.create // 如果不支持,自己实现 if(O ...

  2. 移动web开发中自己遇到的三个小题及解决方法

    大家好! 这是我第二次写随笔感想,有不足之处希望大家提出,我也算的上一个小白,自己进入前端行业也刚刚半年,在这里半年里我遇到一个技术大牛的好领导,让我在项目中学到很多,想和大家分享一下! 一. 移动端 ...

  3. JDBC+MYSQL初始学习

    JDBC+MYSQL初始学习 一.学习准备 Eclipse 开发工具  + mysql数据库+navicat 数据库连接工具 Mysql的数据库连接驱动jar包  + testing测试集成+mave ...

  4. 《SLIC Superpixels》阅读笔记

    原始链接:http://blog.csdn.net/jkhere/article/details/16819285 或许有改动,请参考原文! SLIC 超像素(SLICSuperpixels) Rad ...

  5. matplotlib显示中文字体

    原始地址:http://zanyongli.i.sohu.com/blog/view/195716528.htm matplotlib 1.0.0版 对于3.0的可能不太适用,要注意语法结构! C:/ ...

  6. C# window服务操作

    public int GetWindowsServiceStartType(String sServiceName) //判断服务状态是手动还是禁用还是自动 { string sState = &qu ...

  7. 网络教程(13) 深入TCP协议

    应用层向TCP层发送用于网间传输的.用8位字节表示的数据流,然后TCP把数据流分割成适当长度的报文段(通常受该计算机连接的网络的数据链路层的最大传输单元(MTU)的限制).之后TCP把结果包传给IP层 ...

  8. 训练1-P

    一个矩形的面积为S,已知该矩形的边长都是整数,求所有满足条件的矩形中,周长的最小值. 例如:S = 24,那么有{1 24} {2 12} {3 8} {4 6}这4种矩形,其中{4 6}的周长最小, ...

  9. 训练1-T

    一个正整数,如果它能被7整除,或者它的十进制表示法中某个位数上的数字为7,则称其为与7相关的数.求所有小于等于N的与7无关的正整数的平方和. 例如:N = 8,<= 8与7无关的数包括:1 2 ...

  10. Swoole 源码分析——基础模块之 Pipe 管道

    前言 管道是进程间通信 IPC 的最基础的方式,管道有两种类型:命名管道和匿名管道,匿名管道专门用于具有血缘关系的进程之间,完成数据传递,命名管道可以用于任何两个进程之间.swoole 中的管道都是匿 ...