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实现页面加载时弹出对话框代码
Apr 19 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
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
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
vue实现通讯录功能
2018/07/14 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python实现按中文排序的方法示例
2018/04/25 Python
django初始化数据库的实例
2018/05/27 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
几款好用的python工具库(小结)
2020/10/20 Python
后勤主管工作职责
2013/12/07 职场文书
秸秆管理实施方案
2014/03/15 职场文书
保险公司早会主持词
2014/03/22 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
中国梦口号
2014/06/13 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
教代会闭幕词
2015/01/28 职场文书
教师考核表个人总结
2015/02/12 职场文书
实习证明格式范文
2015/06/16 职场文书