设置 <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. 银行业务-Excel文件的拆分逻辑

    一.问题: 随着银行业务数据量的急剧增加,原始的人力统计数据已经不能满足要求, 需要开发一款可以实现自动化数据统计的系统平台,进行数据的采集.加工.过滤.统计.预测 其中数据采集方式又以[Excel] ...

  2. VS2010 不显示 最近使用的项目 解决办法

    昨天重装了VS2010,然后开了项目看了下今天早上再打开发现起始页近使用项目列表是空白的,每次打开项目都要去到指定目录去找解决方案才能打开,感觉很麻烦,在网上找了下解决方案,解决步骤下:菜单 —— 运 ...

  3. 基于OpenSSL的RSA加密应用(非算法)

    基于OpenSSL的RSA加密应用(非算法) iOS开发中的小伙伴应该是经常用der和p12进行加密解密,而且在通常加密不止一种加密算法,还可以加点儿盐吧~本文章主要阐述的是在iOS中基于openSL ...

  4. python全栈开发-面向对象-进阶

    python_day_18 1,面向对象的三大特性是什么?继承,多态,封装2,什么是面向对象的新式类?什么是经典类?凡是继承object类都是新式类.凡是不继承object类都是经典类.3,面向对象为 ...

  5. 180718-jar包执行传参使用小结

    jar包执行时传参的使用姿势 虽说我们现在大多不太直接使用jar包运行方式,目前比较主流的是将自己的服务丢在某个容器中(如tomcat,jetty等)运行,比如我之前所属的电商公司,就是将项目打包为w ...

  6. Unity Lighting - High Dynamic Range (HDR) 高动态范围（五）

      High Dynamic Range (HDR) 高动态范围 As well as Color Space, the ‘dynamic range’ of your camera needs to ...

  7. 003--MySQL 数据库事务

    什么是事务? 事务是一组原子性的 SQL 查询, 或者说是一个独立的工作单元. 在事务内的语句, 要么全部执行成功, 要么全部执行失败. 事务的 ACID 性质 数据库事务拥有以下四个特性, 即 AC ...

  8. JavaScript学习笔记（二）——函数和数组

    第二章 函数简介 1 第一个函数示例 <script language="JavaScript" type="text/JavaScript"> f ...

  9. Cannot find class [org.springframework.http.converter.json.MappingJacksonHttpMessageConverter]

    <!--避免IE执行AJAX时,返回JSON出现下载文件 --> <bean id="mappingJacksonHttpMessageConverter" cl ...

  10. Scrum立会报告+燃尽图（十一月十八日总第二十六次）：功能开发与讨论贡献分配规则

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://git.coding.net/zhang ...