jQuery中scrollTop()方法用法实例


Posted in Javascript onJanuary 16, 2015

本文实例讲述了jQuery中scrollTop()方法用法。分享给大家供大家参考。具体分析如下:

此方法返回或设置匹配元素的滚动条的垂直偏移量。

语法结构一:

当scrollTop()方法不带有参数的时候是返回匹配元素相对滚动条顶部的偏移量。

$(selector).scrollTop()

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>scrollTop()函数-三水点靠木</title>

<style type="text/css">

#div1{

  border:1px solid black;

  width:200px;

  height:200px;

  overflow:auto

}

#div2{height:250px;}

#div3{

  height:48px;

  width:30px;

  border:1px solid red;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    alert($("#div1").scrollTop()+" px");

  });

});

</script>

</head>

<body>

<div id="div1">

  <div id="div2">

   <div id="div3"></div>

  </div>

</div>

<button>获得offset值</button>

</body>

</html>

语法结构二:

当scrollTop()方法带有参数的时候置垂直滚动条顶部偏移为该值。

$(selector).scrollTop(val)

参数列表:

参数 描述
val 设定垂直滚动条值

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>scrollTop()函数-三水点靠木</title>

<style type="text/css">

#div1{

  border:1px solid black;

  width:200px;

  height:200px;

  overflow:auto

}

#div2{height:250px;}

#div3{

  height:48px;

  width:30px;

  border:1px solid red;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").scrollTop(30);

  })

})

</script>

</head>

<body>

<div id="div1">

  <div id="div2">

    <div id="div3"></div>

  </div>

</div>

<button>设置offset值</button>

</body>

</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jquery中获取select选中值的代码
Jun 27 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
jQuery中position()方法用法实例
Jan 16 #Javascript
jQuery中offset()方法用法实例
Jan 16 #Javascript
jQuery中clone()方法用法实例
Jan 16 #Javascript
jQuery中empty()方法用法实例
Jan 16 #Javascript
jQuery中replaceAll()方法用法实例
Jan 16 #Javascript
jQuery中wrapInner()方法用法实例
Jan 16 #Javascript
jQuery中wrapAll()方法用法实例
Jan 16 #Javascript
You might like
PHP4实际应用经验篇(9)
2006/10/09 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
IE无法设置短域名下Cookie
2010/09/23 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
windows下python安装pip图文教程
2018/05/25 Python
python字典的常用方法总结
2019/07/31 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
pandas数据处理进阶详解
2019/10/11 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
商场活动策划方案
2014/01/24 职场文书
简单租房协议书范本
2014/08/20 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
校本研修个人总结
2015/02/28 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
投资入股协议书
2016/03/22 职场文书
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
python中的3种定义类方法
2021/11/27 Python