scrollTop()案例
设置 <div> 元素中滚动条的垂直偏移：
定义和用法
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{border: 1px solid gray;width: 200px;height: 200px;margin: 50px;overflow: auto}
</style>
</head>
<body>
<div>
刚才看了黄小平先生的一篇短文，一个内心有光的人，永远不会有黑夜。是啊，每天凌晨起床，在灯光下走到窗前，外面漆黑一片，也曾经试着走出去，可以360度的仰望着天空，即使隔着厚厚的云层，也能感受到夜空的美丽斑斓，就像一粒种子在黑暗的牢笼里，用生根发芽的信念，残破自己的身体一点一点的向上攀爬，当她顶开地表的最后一条缝，光明开始记录她绽放的生命，不论是树活千年，还是花开数天，最初她们都经历过黑暗。人生也是这样，只要心里充满对光明的渴望，至少你是温暖的！许多小语——心里的光就是梦起飞的地方，飞行的过程就是目标中的理想！
</div>
<button class="settings">把scrollTop设置100px</button>
<button class="gettop">获取当前scrollTop</button>
<script type="text/javascript" src="js/jquery-1-8-3.js"></script>
<script type="text/javascript">
(function($){
$(".settings").click(function(){
$("div").scrollTop(100);
});
$(".gettop").click(function(){
console.log($("div").scrollTop() + "px");
});
console.log($(".settings").offset());
})(jQuery);
</script>
</body>
</html>
scrollTop()案例的更多相关文章
- JQuery DOM操作（属性操作/样式操作/文档过滤）
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- 关于小程序 scroll-view中设置scroll-top无效 和小说图书阅读进度条小案例
在最近的项目有做到关于小说阅读的进度条功能,其中用到scroll-view和slider组件,发现scroll-view中的scroll-top在设置值后无效,出现这种情况大概是以下几种问题: 1.s ...
- JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）
点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- Bootstrap 快速人门案例——前端最火的插件
今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要.同时,我们可以快速完成开发任务,减少发开周期,有不对的地方望大家指正. 如果你想走的更 ...
- 用jquery实现瀑布流案例
一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据 ...
- 用scrollTop制作一个自动滚动公告栏
我们在浏览网页时,经常会看到会一些滚动的栏目,比如向上滚动的公告.新闻等.其实他们的制作都不难,只要学了基础的html.css.javascript就可以做出来,用JavaScript的scrollT ...
- python 学习笔记十四 jQuery案例详解（进阶篇）
1.选择器和筛选器 案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...
- 一步一步学习SignalR进行实时通信_6_案例
原文:一步一步学习SignalR进行实时通信_6_案例 一步一步学习SignalR进行实时通信\_6_案例1 一步一步学习SignalR进行实时通信_6_案例1 前言 类的定义 各块功能 后台 上线 ...
随机推荐
- sql心经
问题: 查数据是一件很痛苦的事,尤其是多张表链接查询更是惨不忍睹 各种条件拼接,各种查询数据不对,看着写了半天的sql,感觉很完美,没毛病啊... 分析: http://blog.jobbole.co ...
- 【HEOI2016】排序
题面 题解 这题好神仙啊... 我们二分这个位置上的数, 然后当\(val[i] \geq mid\)的位置设为\(1\),否则为\(0\) 这样一来,这道题就变成了一个\(01\)序列排序,所以就可 ...
- HBase第三章 过滤器
1 列值过滤器 SingleColumnValueFilter 对列值进行过滤. @Test public void scanDataByFilter() throws IOException { ...
- JUnit在intellij idea中只能在test里面才能使用，否则不能添加import
只能在 src下的test下使用 不能再main下使用 否则不能import到指定的junit包 idea这样做的好处就是分离主项目和测试项目,这样一来就能够更加方便的测试了 如图直接这样把整个主包 ...
- avaweb(三十二)——JDBC学习入门
一.JDBC相关概念介绍 1.1.数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡 ...
- docker应用容器化准则—12 factor
在云的时代,越来越多的传统应用需要迁移到云环境下,新应用也要求能适应云的架构设计和开发模式.而12-factor提供了一套标准的云原生应用开发的最佳原则. 在容器云项目中应用容器化主要参考12-Fac ...
- Python的sys.argv使用说明
刚开始使用这个参数的时候,很不明白其含义.网上搜索很多都是贴的官网上面的一则实例,说看懂,就明白.可是,我看不懂.现在在回头看这个参数使用,并不是很麻烦. 举几个小例子就明白了. 创建一个脚本,内容如 ...
- “Hello World！”团队——Final发布用户使用报告
博客内容: 1.用户体验报告表 2.用户评论截图 3.总结 一.用户体验报告表 用户使用报告 用户类别 用户姓名(化名) 性别 用户职业 使用频次 用户评论 新增用户 小小静 女 中学信息技术老师 8 ...
- 王者荣耀交流协会——第7次Scrum会议
照片由刘耀泽同学拍摄 ,王露芝同学(外援)没有参加本次会议. 要求2 : 时间跨度:2017年10月19日 15:05 - 15:20 共计15分钟 要求3 : 地点:计算机楼107教室 要求4 : ...
- 王者荣耀交流协会 - 第7次Scrum会议（第二周）
1.例会照片 照片由王超(本人)拍摄,组内成员刘耀泽,高远博,王磊,王玉玲,王超,任思佳,袁玥全部到齐. 2.时间跨度: 2017年10月26日 17:05 — 17:47 ,总计42分钟. 3.地 ...