深度理解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 ...
随机推荐
- 如何使用fetch
Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应.它还提供了一个全局fetch()方法,该方法提供了一种简单,合乎逻辑的方式来跨网络异步获取 ...
- jQuery操作样式知识总结
css操作 功能:设置或者修改样式,操作的是style属性. 设置单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使用案例 $(&qu ...
- Java 开源博客 Solo 1.1.0 发布 - 告别 GAE
Solo 1.1.0 正式发布了,感谢一直以来关注 B3log 开源的朋友! 在这个版本中,我们对项目结构和发布包进行了重大调整: 各式***尚未普及,所以决定去除 GAE 版本 H2 版本使用人数较 ...
- JavaScript Cookies使用
Cookie 是个存储在客户端(浏览器)记录信息确定用户身份的小文本文件,可以用来跟踪用户当前登陆状态和用户浏览页面的次数,记录用户输入的文本信息,也可以在页面间传递变量,记录用户一些行为. 当浏览器 ...
- 【图文】Excel中vlookup函数的使用方法
今天统计数据,用到了Excel中vlookup函数,第一次使用当然少不了百度,经过反复研究后,算是解决了问题,现整理成文档. 一.实现效果 Sheet1 Sheet2 注:上图中sheet1商品条 ...
- 了解权限控制框架shiro 之实际应用.
Apache Shiro 1.权限控制分为 a.粗粒度 URL 级别权限控制 b.细粒度方法级别权限控制 2.使用shiro进行权限控制主要有四种主要方式 : a. 在程序中 通过 Subje ...
- 杭电1159 Common Subsequence【最长公共子序列】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1159 解题思路:任意先给出两个字符串 abcfbc abfcab,用dp[i][j]来记录当前最长的子 ...
- 使用meta实现页面的定时刷新或跳转
<meta http-equiv="refresh" content="5"> 这个表示当前页面每5秒钟刷一下,刷一下~ <meta http ...
- CSS读书笔记（1）---选择器和两列布局
(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...
- 02--linux操作系统基础学习笔记
linux是一种操作系统. 嵌入式系统是以应用为中心的,以计算机技术为基础并且软硬件可剪裁,专用计算机系统. 内核下载网站 https://www.kernel.org/ https://www.ke ...