[jQuery].scrollTop() 函数详解

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量309 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/hihtml5/p/6197605.html
版权

scrollTop()函数用于设置或返回当前匹配元素相对于垂直滚动条顶部的偏移。

当一个元素的实际高度超过其显示区域的高度时，在一定的设置下，浏览器会为该元素显示相应的垂直滚动条。此时，scrollTop()返回的就是该元素在可见区域之上被隐藏部分的高度(单位：像素)。

如果垂直滚动条在最上面(也就是可见区域之上没有被隐藏的内容)，或者当前元素是不可垂直滚动的，那么scrollTop()将返回0。

该函数属于jQuery对象(实例)，并且对可见的和隐藏的元素均有效。

语法

jQuery 1.2.6 新增该函数。

jQueryObject.scrollTop( [ value ] )
注意：
1、如果省略了value参数，则表示返回偏移值；如果指定了该参数，则表示设置偏移值。
2、scrollTop()函数的"设置"操作针对的是当前jQuery对象所匹配的每一个元素；"读取"操作只针对第一个匹配的元素。

参数

 

参数描述
value可选/Number类型用于设置的偏移值。

 

返回值

scrollTop()函数的返回值为Number/jQuery类型，返回值的类型取决于scrollTop()函数当前执行的是"设置"操作还是"读取"操作。

如果scrollTop()函数执行的是"设置"操作，则返回当前jQuery对象本身；如果是"读取"操作，则返回第一个匹配元素相对于垂直滚动条顶部的偏移。

如果当前jQuery对象匹配多个元素，返回坐标时，scrollTop()函数只以其中第一个匹配的元素为准。如果没有匹配的元素，则返回null。

示例&说明

以下面这段HTML代码为例：

<div id="content" style="width:200px; height: 200px; overflow:auto;">
CodePlayer<br>
专注于编程开发技术分享<br>
CodePlayer<br>
专注于编程开发技术分享<br>
CodePlayer<br>
专注于编程开发技术分享<br>
CodePlayer<br>
专注于编程开发技术分享<br>
CodePlayer<br>
专注于编程开发技术分享<br>
CodePlayer<br>
专注于编程开发技术分享<br>
CodePlayer<br>
专注于编程开发技术分享<br>
CodePlayer<br>
专注于编程开发技术分享<br>
CodePlayer<br>
专注于编程开发技术分享<br>
CodePlayer<br>
专注于编程开发技术分享<br>
CodePlayer<br>
专注于编程开发技术分享<br>
CodePlayer<br>
专注于编程开发技术分享<br>
</div>
<input id="btn" type="button" value="点击" >
<div id="msg"></div>

以下jQuery示例代码用于演示scrollTop()函数的具体用法：

var $content = $("#content");
var $btn = $("#btn");
var $msg = $("#msg");

$btn.click( function(){
    $msg.html ( "content的scrollTop：" + $content.scrollTop() );  
} );

// 设置显示区域之前隐藏119px高度的content的内容
$content.scrollTop( 119 );

此时，我们在显示页面上点击按钮，即可看到如下效果(我们平常看到的浏览器滚动条也可以视作<body>元素的实际高度超出显示区域的高度，从而出现该滚动条)：

此文转自:http://www.365mini.com/page/jquery-scrolltop.htm

 

 

转载于:https://www.cnblogs.com/hihtml5/p/6197605.html

weixin_30825581
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中scrollTop()方法用法实例
12-09
本文实例讲述了jQuery中scrollTop()方法用法。分享给大家供大家参考。具体分析如下： 此方法返回或设置匹配元素的滚动条的垂直偏移量。 语法结构一: 当scrollTop()方法不带有参数的时候是返回匹配元素相对滚动条顶部的偏移量。 代码如下:$(selector).scrollTop() 实例代码: 代码如下: <!DOCTYPE html> <html> <head> <meta charset=” utf-8″> <meta name=”author” content=”//www.jb51.net/” /> <title>scrollTop()函数-软件开发网</titl
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
12-10
做页面的时候可能会用到位置固定的层，读取 document.body.scrollTop 来设置层的位置，像这样：­ [removed] = function (){ var oFix = document.getElementById(“divfix”); oFix.style.top = document.body.scrollTop + “px”; } 可是怎么没有达到预期效果呢，输出 document.body.scrollTop 的值一看，一直都是 0。原来是 DTD 的问题,要是页面直接用 开头的话就没有问题了。但是要符合 web 标准，DTD 当然是不能少的。具有 D
jQuery之scrollLeft()、scrollTop()
06-17 1018
【代码】jQuery之scrollLeft()、scrollTop()
JavaScript中的scrollTop（js中的scrollTop，滚动到顶部，javascript滚动到顶部）
weixin_65793170的博客
03-30 1万+
scrollTop是JavaScript中一个非常有用且重要的方法，它用于获取或设置元素的垂直滚动条位置，实现各种滚动相关的功能，无论是回到顶部、滚动到指定位置还是监听滚动事件，都需要用到scrollTop，在本文中，我们将深入了解scrollTop的用法和实际应用，这是一张scrollTop的关系图，仅供参考
深度理解Jquery 中 scrollTop() 方法
weixin_34239592的博客
09-05 802
这是工作遇到scrollTop() 方法。为了强化自己，把它记录在博客园当中。 下面就开始scrollTop 用法讲解： scrollTop() 定义和用法 scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。 Note： 当滚动条位置位于最顶部时，位置是0；当用于返回位置时： 该方法返回 第一个匹配元素的滚动条的垂直位置。当用于设置位置时： 该方法设置 所有...
scrollTop()方法
热门推荐
muxi229的博客
06-19 3万+
scrollTop设置滚动条用法 前提 工作中需要做一个点击右侧网元或板卡，左侧topo图滚动到对应位置 用到的知识点 scrollTop(),position()，工作环境中用了Jtopo,Ztree scrollTop定义与用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。 如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。 $(selector).scrollTop(offset)
jQuery滚动到顶部的方法
qq_21810059的博客
08-10 1252
【代码】jQuery滚动到顶部的方法。
jq概念笔记
林中明月间丶
04-10 517
只能输入纯数字的输入框:<input type="text" name="" oninput="value=value.replace(/[^\d]/g,'')"> //放心使用很强大 jQuery中$()可以有两个参数 var $box = $('div.work_content'); var $txt = $('div.model-select-text',$box); ...
jQuery scrollTop( ) 方法
m0_57835615的博客
06-13 929
通过jQuery的 scrollTop( ) 方法，我们可以设置或返回被选元素的垂直滚动条位置。 注意： （1）返回被选元素的垂直滚动条位置时， （2）
23-jQuery的scrollTop方法——获取/设置滚动的偏移位
小伟
04-11 717
scrollTop([val]) 获取/设置滚动的偏移位 scrollLeft([val]) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>23-jQuery的scrollTop方法</title> &lt...
解决VUE中document.body.scrollTop为0的问题
10-18
今天小编就为大家分享一篇解决VUE中document.body.scrollTop为0的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
document.documentElement && document.documentElement.scrollTop
10-30
document.documentElement && document.documentElement.scrollTop
jQuery中scrollTop()方法解析
ITzhongzi的博客
03-20 3221
在jq中，scrollTop（）方法： 调用方式： jq对象.scrollTop()   1、当不传入任何参数时，获取 调用该方法的jq对象中匹配的dom元素的子元素卷起的高度。 2、当传入一个参数的时候，表示设置 调用该方法的jq对象中匹配的dom元素的子元素的据其高度 示例demo1：（不传参数 获取p内部卷起的高度） html>head> styl
jq scrollTop() 方法
泥猴桃的博客
10-09 1824
使用方法 给要滑动的元素的父级添加 scrollTop()方法，前提是滑动块的父级一定要用绝对定位 ，然后css 里加上 overflow:auto;才可以获取到值 代码如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="view
jQuery学习:回到页面顶部 scrollTop的学习
weixin_47295886的博客
11-11 282
【代码】jQuery学习:回到页面顶部 scrollTop的学习。
jquery使滚动条滚动到最底部 scrollTop
zcc的博客
07-15 6350
需求：当div 中 内容过多出现滚动条时，让滚动条滚动到最下面。 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scrollHeight网页内容实际高度 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> .out-.
[ jQuery ] scrollTop与offset()!
杨有梦的博客
03-25 7047
jquery scrollTop() 与offset()! 曾经很长一段时间，很多人问我下面一段代码的好处是什么？ ;(function($){ //do something })(jQuery); 但我一直就是这么写着，似乎觉得它本来就是这个样子的。 对说书中的那么套理论，可以完全不在乎，只知道是为了防止污染，对于污染一词，也许和环境污染一样。 只到有一天，我碰过了两
jQuery学习：scroll滚动 垂直滚动scrollTop 水平滚动scrollLeft
weixin_47295886的博客
11-11 718
在其他浏览器使用的是body在chrome是html。读取页面滚动条的y坐标（兼容 IE chrome）scrollTop():读取/设置y坐标的位置。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 1307
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
document.documentElement.scrollTop为0
07-27
\[2\]另外，为了兼容所有浏览器，可以封装一个函数来获取页面向上卷曲出去的距离，可以使用以下代码：top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值