这是工作遇到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命名空间的理解与实现

    命名空间有效防止函数名/类名和其他人的冲突,在使用多个第三方框架或类库的时候,一旦冲突,唯一能作的就是放弃其中一个.从事Web开发不可避免要接触JavaScript,目前最新版本的JavaScript ...

  2. CI中的验证码

    CI中的验证码相对来说使用非常方便直接加载类调用函数以及一些配置,代码如上,比较简单,具体函数可在CI手册的辅助函数参考CAPTCHA辅助函数中查询,CI中的验证码是直接生成验证码图片在你自己创建的C ...

  3. USB接口大全

    USB2.0系列: Standard A: Standard B: Mini Standard B: Micro USB: ** Micro USB 与 Mini B比较 ** USB3.0系列: U ...

  4. javascript中构造函数的三种方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Laravel5 开启Debug

    Laravel默认没有开启Debug,打开需要两步: .env文件中设置APP_DEBUG=true: 把Laravel服务重启一下(摸索出来的). 这只是开启了基本的调试模式,如果需要看更详细的调试 ...

  6. 【Five-Minute Share】数据库内存分配设置

    对于数据库分配的内存,经常会看到的一条准则是:将服务器75-80%的内存分配给数据库.这是一条比较常见的准则,但并不是绝对的.首先,我们需要保障操作系统运行本身所需的充足内存后,才能去考虑数据库所分配 ...

  7. Nagios Windows客户端NSClient++ 0.4.x安装配置

    NSClient++ 0.3.x和NSClient++ 0.4.x的配置完全不一样,官方的文档也没有全部更新.我记录下自己的一些操作.   一.下载安装NSClient++ 1.到http://nsc ...

  8. 三维重建：Kinect几何映射-SDK景深数据处理

    此文大量使用XML,非C类的代码,看看图即可. 原文链接:Kinect for Windows SDK开发入门(五):景深数据处理 3. 对物体进行测量 像上篇文章中对深度值测量原理进行讨论的那样,像 ...

  9. java_poi

    import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import org.apache. ...

  10. form 表单的另类触发方式：报错触发

    在用form表单提交的时候,遇到一个问题:表单未验证完,表单就提前提交了. 然后通过断点调试,发现form提交会因为函数报错提前提交. 即如果你的form提交过程中,没有执行到return true之 ...