含义:滚动条高度

作用:滚动加载(ajax),滚动导航固定定位,滚动弹框定位等等.

展示滚动导航和侧边栏滚动固定定位的效果:查看效果

1、chrome浏览器

document.body.scrollTop和document.documentElement.scrollTop都可以

2、各浏览器下 scrollTop的差异

IE6/7/8/9/10:

对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop  ;

Safari:

safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;

Firefox:

火狐等等相对标准些的浏览器就省心多了,直接用

 document.documentElement.scrollTop ;

3、获取scrollTop值

完美的获取scrollTop 赋值短语 :

var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;

javascript中的scrollTop的更多相关文章

  1. javascript中元素的scrollLeft和scrollTop属性说明

    再说意义之前,前说一下这两个属性的适用范围: 注意:这两个属性只能用于元素设置了overflow的css样式中.否者这两个属性没有任何意义.且overflow的值不能为visible,但可以为hidd ...

  2. javascript中无法通过div.style.left获取值的问题

    一.问题总结: 样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取. 让元素移动到200停止 setTim ...

  3. JavaScript中的各种宽高以及位置总结

    JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...

  4. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  5. JavaScript中的位置屬性

    屏幕中的位置(直接使用,無需前綴): screenLeft.screenTop:除了火狐都支持 screenX.screenY: 窗口的大小(谷歌的inner=outer,直接使用,無需前綴): in ...

  6. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  7. JavaScript中作用域回顾(避免使用全局变量)(瀑布流的实现)(scroll事件)以及Django自定义模板函数回顾

    页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板 ...

  8. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  9. javascript中的定时器

    本文地址:[http://www.xiabingbao.com/javascript/2015/04/20/javascript-timer/] 在以前的文章[javascript中的定时器]中,简单 ...

随机推荐

  1. sql语句的优化分析

    开门见山,问题所在 sql语句性能达不到你的要求,执行效率让你忍无可忍,一般会时下面几种情况. 网速不给力,不稳定. 服务器内存不够,或者SQL 被分配的内存不够. sql语句设计不合理 没有相应的索 ...

  2. 【Win10应用开发】协议-下篇:自定义多个协议

    前面介绍了如何为应用程序自定义协议,于是有朋友会问,我希望为我的应用注册多个协议,不同的协议处理不同的事情,能吗?答案是能的. 方法主要在配置清单文件上,这里我给出一个例子,示例应用将注册两个协议,分 ...

  3. 万能Adapter以及ViewHolder性能优化

    //CommonAdapter import android.content.Context; import android.widget.BaseAdapter; import java.util. ...

  4. 深入理解DOM事件类型系列第五篇——文本事件

    × 目录 [1]change [2]textInput [3]input[4]propertychange[5]兼容 前面的话 如果DOM结构发生变化,触发的是变动事件:如果文本框中的文本发生变化,触 ...

  5. MVC中处理表单提交的方式(使用html扩展方法+juqery插件)

    这里使用扩展方法来扩展基于jquery.form 插件,实现基于异步的ajax的提交方式.

  6. 我的编程开始(C)

    一,前言 写完t-sql系列,想了想自己的编程之路,一直有个想法,把自己这两年所整理的编程知识拿出来和大家分享,本来写完t-sql是想写一些设计思想的,因为现在也是在学习和整理一些简单框架,经常泡在大 ...

  7. spring4+hibernate4+struts2项目整合的步骤及注意事项

    首先,在整合框架之前,我们需要知道Spring框架在普通Java project和Web project中是略有不同的. 这个不同地方就在于创建IOC容器实例的方式不同,在普通java工程中,可以在m ...

  8. jQuery-1.9.1源码分析系列(十) 事件系统——事件绑定

    事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...

  9. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  10. 记一个简单的sql查询

    在我们做各类统计和各类报表的时候,会有各种各样的查询要求.条件 这篇主要记录一个常见的统计查询 要求如下: 统计一段时间内,每天注册人数,如果某天没有人注册则显示为0 现在建个简单的表来试试 建表语句 ...