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 相关文章推荐
js中call与apply的用法小结
Dec 28 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
简单的JS轮播图代码
Jul 18 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
JS中Attr的用法详解
Oct 09 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
页面使用密码保护代码
2013/04/10 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python实现一个简单的验证码程序
2017/11/03 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Python API len函数操作过程解析
2020/03/05 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
2014春晚主持词
2014/03/25 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
单位工作证明
2014/10/07 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
银行服务理念口号
2015/12/25 职场文书
个人向公司借款协议书
2016/03/19 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers