深度理解Jquery 中 scrollTop() 方法
这是工作遇到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() 方法的更多相关文章
- 深度理解Jquery 中 offset() 方法
参考原文:深度理解Jquery 中 offset() 方法
- 解析jQuery中extend方法--源码解析以及递归的过程《二》
源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...
- jquery中end()方法的解释
来源:http://www.jquery001.com/jquery-end-method.html 对于end()方法,jQuery文档是这样解释的:jQuery回到最近的一个"破坏性&q ...
- ajax和springmvc的请求响应原理——深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
1,四大重要部分: 请求链接 post请求和get请求 请求参数形式 响应内容形式 2,从springmvc的controller角度,controller能接收到请求的前提 请求链接必须对应 pos ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- jQuery中attr()方法用法实例
本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...
- 使用jquery中height()方法获取各种高度大全
alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(docum ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
随机推荐
- js 找数组中的最值
背景: 2个数组以下 , 比如 [[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]] 找最值的时候, ...
- 移动端 fixed 固定按钮在屏幕下方，然后按钮被键盘顶上来...顶上来了有没有~
在移动端 H5 页面开发中,我使用了 fixed 固定某个元素在屏幕的最下方, 这时点击输入框,接着非常非常自然地出现了元素被系统键盘顶起来的情况,如下图. 解决方案: 首先,给页面最外层包裹一层 d ...
- 【转载】程序猿转型AI必须知道的几件事！
历史上AI火过两次,但是最终都已销声匿迹作为结束.这次AI大火的原因:AlphaGo 4比1战胜李世石,相对于一些外行人的恐慌和恐惧,其实很多业内人员在这场世纪之战结束后,都为人类点上了一个大大的赞. ...
- HDFS开发中的一些问题（逐步补充）
1.windows操作系统下运行时报:Failed to locate the winutils binary in the hadoop binary path java.io.IOExcept ...
- ESLint 规范项目代码
ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本. NCZ 以可扩展.每条规则独立.不内置编码风格为理念编写了一个 lint ...
- 关于XML学习
XML为知识构架存储语言: http://www.w3school.com.cn/xml/xml_tree.asp 语义网:为计算机构建一个系统的概念网络模型是计算机理解概念和机间信息交流的途径:XM ...
- CorelDRAW三十周年庆典暨2019新耀发布会，诚邀您的莅临！
30年时光荏苒!眨眼风惊雨过. 在1989年的春天,CorelDRAW 1.0正式发布,一经面世就掀起了图形设计行业革命浪潮,这个图形工具不仅给设计师提供了矢量图像.页面设计,更能应用于网站制作.位图 ...
- __str__和__repr__
Python 中的 __str__ 与 __repr__ 到底有什么差别 很多时候我们自己编写一个类,在将它的实例在终端上打印或查看的时候,我们往往会看到一个不太满意的结果. 类默认转化的字符串基 ...
- Python数据分析-----数据分类
1.常见的分类算法主要有: (1)KNN算法 (2)贝叶斯方法 (3)决策树 (4)人工神经网络 (5)支持向量机(SVM) 2.KNN算法 (1)KNN应用场景: 比方说样本中有很多零食.很多电器. ...
- 如何批量导入excel数据至数据库（MySql）--工具phpMyAdmin
之前由于数据储存使用excel保存了所有数据,经过初步数据筛选,数据量近4000条.一条一条录入数据库显然是不可行的.以下是我所操作的步骤: 1.只保留excel的数据部分,去除第一行的具体说明 2. ...