深度理解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 ...
随机推荐
- 3D旋转立方体案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 2nd
Java语言基础(常量的概述和使用) A:什么是常量 在程序执行的过程中其值不可以发生改变 B:Java中常量的分类 字面值常量 自定义常量(面向对象部分讲) C:字面值常量的分类 字符串常量 用双引 ...
- 优动漫PAINT用户界面介绍
使用优动漫PAINT能够快速实现工程巨大的漫画.插画以及动画,从13年发布至今一直备受好评,目前优动漫PAINT1.6.6.1是最新的版本,新版本的完善也受到更多年轻伙伴的青睐,使用优动漫PAINT可 ...
- 「BZOJ3339」Rmq Problem(5366)
题目描述 输入 输出 样例输入 7 5 0 2 1 0 1 3 2 1 3 2 3 1 4 3 6 2 7 提示 这个题说来也挺有意思的 当时集训的时候遇到了一道类似的题,但是题意与此不同,我太菜了, ...
- 数据分析例子-------CTR1
1.CTR: (1)几个概念: impression(展示):用户看到该广告的次数.也就是一个广告被显示了多少次,它就计数多少.比如:打开网站的一个页面,网站上的所有广告就被显示了一次,每个广告增加1 ...
- python爬网页中文乱码问题
再用python爬取网页时,用模拟浏览器登陆,得到的中文字符出现乱码,该怎么解决呢? url = “http://newhouse.hfhouse.com/” req = urllib2.Reques ...
- Project Euler 19 Counting Sundays（ 蔡勒公式计算星期数 ）
题意:在二十世纪(1901年1月1日到2000年12月31日)中,有多少个月的1号是星期天? 蔡勒公式:计算 ( year , month , day ) 是星期几 以下图片仅供学习! /****** ...
- mybatis 批量导入数据到mysql返回批量Id
1.首先mybatis版本必需是3.3.1或以上 2.mapper配置文件中 <insert id="insertOrderBatch" parameterType=&quo ...
- C# 日期格式
# DateTime日期格式化 在C#中DateTime是一个包含日期.时间的类型,此类型通过ToString()转换为字符串时,可根据传入给Tostring()的参数转换为多种字符串格式. 目录 1 ...
- jQuery(基础dom及css操作)
设置元素内容 元素属性操作 ---------- 元素样式操作 ---------------- 对象数组的遍历 测试代码: $(function () { var v=$('div').css([' ...