设置 <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. 一个命令安装lnmp

    安装LNMP执行:wget -c http://soft.vpser.net/lnmp/lnmp1.3-full.tar.gz && tar zxf lnmp1.3-full.tar. ...

  2. Wiki版产品需求---产品需求文档到底是谁的？产品到底是谁的？

    在听了测试的一通唠叨之后,"内部实现一堆逻辑,只有一句话的需求文档","文档那么简单,我们怎么测试啊",心中突然想起来自己曾经干的一件当时觉得还不错的事情,但是 ...

  3. 【转载】D3D深度测试和Alpha混合

    原文:D3D深度测试和Alpha混合 1.       深度测试 a)         深度缓冲区:屏幕上每个像素点的深度信息的一块内存缓冲区.D3D通过比较当前绘制的像素点的深度和对应深度缓冲区的点 ...

  4. [FJOI2016]建筑师 斯特林数

    早期作品,不喜轻喷. LG传送门 组合数与斯特林数的基本应用. 组合数 大家应该都熟悉它的表达式,但我们这里使用它的递推式会更加方便,下面推导组合数的递推式.设\(\binom{n}{m}\)表示在\ ...

  5. java 文件过滤

    public class TestFileio { public static void main(String[] args) { File file = new File("D:/upl ...

  6. C、C++字符操作归总

    1)字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strcat(p, p1) 附加字符串 strncat(p, p1, n) 附加指定长度 ...

  7. mysql数据库 root密码重置

    问题 忘记了MySQL的密码,网上搜索的杂七杂八,汇总一下. mysql版本是windows的mysql 5.7 步骤 1.以管理员身份打开cmd,切换到MySQL的bin目录 默认的话,一般是在C: ...

  8. fiddler的断点使用

    功能 用于修改数据 1.断点设置请求之前--修改请求数据 2.断点设置在响应时--对响应的数据修改 已中断的会话最前面的图标为红色的带箭头的标志 设置断点方法 1.菜单栏:rules->auto ...

  9. python程序设计——面向对象程序设计：属性

    python 3.x 的属性 可以将属性设置为 可读,可修改,可删除 # 只读属性,不允许修改和删除 class Test: def __init__(self,value): self.__valu ...

  10. win2003系统网络安装——基于linux+pxe+dhcp+tftp+samba+ris

    原文发表于:2010-09-16 转载至cu于:2012-07-21 一．原理简介 PXE(preboot execute environment)工作于Client/Server的网络模式,支持工作 ...