设置 <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. Nginx入门篇（六）之反向代理和负载均衡

    一.Nginx负载均衡集群 介绍 负载均衡(Load Balance)集群提供了一种行之有效的办法,来扩展网络设备和服务器负载.带宽和吞吐量,同时加强了网络数据处理能力,提供了网络的灵活性和可用性. ...

  2. spark读取mongodb数据写入hive表中

    一 环境: spark-: hive-; scala-; hadoop--cdh-; jdk-1.8; mongodb-2.4.10; 二.数据情况: MongoDB数据格式{    "_i ...

  3. js的视频和音频采集

    js的视频和音频采集 今天要写的,不是大家平时会用到的东西.因为兼容性实在不行,只是为了说明下前端原来还能干这些事. 大家能想象前端是能将摄像头和麦克风的视频流和音频流提取出来,再为所欲为的么.或者说 ...

  4. idea热部署时 编写Controller会接收不到参数

    因为我是热部署启动服务器后才编写的request和getparameter 所以可能接收不到 重启一下服务器即可

  5. Android开源的精美日历控件，热插拔设计的万能自定义UI

    Android开源的精美日历控件,热插拔设计的万能自定义UI UI框架应该逻辑与界面实现分离,该日历控件使用了热插拔的设计 ,简单几步即可实现你需要的UI效果,热插拔的思想是你提供你的实现,我提供我的 ...

  6. VirtualBox主机和虚拟机互相通信

    默认情况下VirtualBox虚拟机网络设置为网络地址转换,虚拟机中的地址一般是10.0.2.x,虚拟机中访问主机只需要访问默认网关地址即可,但是主机访问虚拟机就需要增加一些配置了,方法有以下几种: ...

  7. Qt 利用XML文档，写一个程序集合 二

    接上一篇文章https://www.cnblogs.com/DreamDog/p/9213915.html XML文档的读写 一个根节点,下面每一个子节点代表一个子程序,内容为子程序名字,图标路径,e ...

  8. OAI搭建总结

    我是参考网上的方法:oai搭建之eNB的文章, 接下来就根据自身所遇到的问题再这里总结一下步骤: 一.再官网上下载oai的文件openairinterface5g-master.zip 二.编译的过程 ...

  9. JavaFX学习笔记——ControlsFX控件集学习——ToggleSwitch和BreadCrumbBar例子

    ToggleSwitch ToggleSwitch ts = new ToggleSwitch("开"); 效果 BreadCrumbBar BreadCrumbBar<St ...

  10. Unity初级案例——贪吃蛇

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...