设置 <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()案例的更多相关文章

  1. JQuery DOM操作（属性操作/样式操作/文档过滤）

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  2. 关于小程序 scroll-view中设置scroll-top无效 和小说图书阅读进度条小案例

    在最近的项目有做到关于小说阅读的进度条功能,其中用到scroll-view和slider组件,发现scroll-view中的scroll-top在设置值后无效,出现这种情况大概是以下几种问题: 1.s ...

  3. JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）

    点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  4. Bootstrap 快速人门案例——前端最火的插件

    今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要.同时,我们可以快速完成开发任务,减少发开周期,有不对的地方望大家指正. 如果你想走的更 ...

  5. 用jquery实现瀑布流案例

    一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据   ...

  6. 用scrollTop制作一个自动滚动公告栏

    我们在浏览网页时,经常会看到会一些滚动的栏目,比如向上滚动的公告.新闻等.其实他们的制作都不难,只要学了基础的html.css.javascript就可以做出来,用JavaScript的scrollT ...

  7. python 学习笔记十四 jQuery案例详解（进阶篇）

    1.选择器和筛选器 案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  8. JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念

    JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...

  9. 一步一步学习SignalR进行实时通信_6_案例

    原文:一步一步学习SignalR进行实时通信_6_案例 一步一步学习SignalR进行实时通信\_6_案例1 一步一步学习SignalR进行实时通信_6_案例1 前言 类的定义 各块功能 后台 上线 ...

随机推荐

  1. echarts 拐点添加图片

    series : [ { name:'搜索引擎', type:'line', symbol:'emptyCircle', symbolSize: 5, itemStyle: { normal: { l ...

  2. python 多线程笔记（6）-- 闭包

    在类里弄一个闭包出来 很多资料上说,类内部的变量有两种. 按定义所在的位置,分__init__上方的和__init__下方的 按内存所在的位置,分类的和实例的,或者说公共的和私有的 现在,我想在类里定 ...

  3. Jmeter接口测试之Get请求

    [一] 在测试计划下面添加一个线程组---------->在线程组下面分别添加HTTP请求.响应断言.BeanShellPreProcessor.察看结果树.聚合报告等内容. [二] 将使用的协 ...

  4. IDEA 破解图文教程 - 2018.9 更

    你好!这里是你要找的 IDEA 破解方法 目录     一.前言    二.IDEA 安装         2.1 下载IDEA 旗舰版         2.2 开始安装         2.3 自定 ...

  5. 修改Linux系统下的最大文件描述符限制

    通常我们通过终端连接到linux系统后执行ulimit -n 命令可以看到本次登录的session其文件描述符的限制,如下: $ulimit -n1024 当然可以通过ulimit -SHn 1024 ...

  6. 工作在Amazon：为何晋升如此难？

    英文原文:Why It's So Difficult to Climb Amazon's Corporate Ladder 本文作者 Brad Stone 的新书 The Everything Sto ...

  7. 手动配置网卡配置文件ifcfg-eth0

    linux 其他知识目录 原文链接:https://www.cnblogs.com/arvintang/p/5990599.html 网络接口配置文件[root@localhost ~]# cat / ...

  8. 安装好Oracle Client以后没有tnsnames.ora文件

    安装好Oracle Client以后没有tnsnames.ora文件 安装完Oracle Client以后,发现相应目录中没有tnsnames.ora文件,其实只要手动建立一个就可以了.在 oracl ...

  9. KETTLE元数据表

    表名 说明 R_CLUSTER R_CLUSTER_SLAVE R_CONDITION R_DATABASE 数据库连接信息 R_DATABASE_ATTRIBUTE 数据库属性 R_DATABASE ...

  10. spark总结——转载

    转载自:    spark总结 第一个Spark程序 /** * 功能:用spark实现的单词计数程序 * 环境:spark 1.6.1, scala 2.10.4 */ // 导入相关类库impor ...