1、scrollTop
（1）设置scrollTop
FF、IE8 使用document.documentElement.scrollTop = 100;
chrome 使用document.body.scrollTop = 100;
（2）取值
scrollTop = document.documentElement.scrollTop + document.body.scrollTop; //兼容
2、scrollHeight
计算方法：scrollHeight = content.height() + padding; //padding是上下边距的和
（1）取值
FF、IE8 document.documentElement.scrollHeight = body.content.height() + margin;
document.body.scrollHeight = body.content.height();
chrome document.documentElement.scrollHeight = document.body.scrollHeight = body.content.height() + margin;
关于scrollHeight的实践，出现了CSS兼容问题
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>scrollTop和scrollHeight的区别</title>
<base target="_self" />
<style type="text/css">
#first01{
width:200px;height:400px;background-color:red;overflow:auto;margin:20px;padding:10px;
}
#words{
height: 700px;background-color: green;
}
</style>
</head>
<body>
<div id="first01">
<div id="words">
</div>
</div>
<div style="width:200px;height:400px;background-color:blue;"></div>
<script type="text/javascript">
var temp = document.getElementById("first01");
alert(temp.scrollTop);
alert(temp.scrollHeight);
</script>
</body>
</html>
效果：
（1）在FF、IE8、IE9下
弹出的数据：scrollTop:100; scrollHeight:710;
（2）在chrome、IE6、IE7、遨游下
弹出的数据：scrollTop:0; scrollHeight:720;
转：http://hi.baidu.com/wuqi02/item/b26e113f6fc38ee81b9696d7
相关推荐
滚动滚动条 相应的值自动改变 对scrollTop scrollHeight offsetHeight不了解的 快下下来 学习吧 打开html一看 你就知道什么意思了 还能看源码 滚动滚动条 相应的值自动改变
在本文中，我们将深入探讨与页面布局相关的三个关键概念：`scrollHeight`、`clientHeight` 和 `scrollTop`。这些属性对于前端开发人员来说非常重要，尤其是在处理动态网页元素时。通过一个具体的示例代码，我们可以...
在探讨“火狐、谷歌、IE关于`document.body.scrollTop`和`document.documentElement.scrollTop`以及值为0的问题”这一主题时，我们深入分析了浏览器在处理页面滚动位置时的不同行为，尤其是当滚动位置值始终为0时的...
在JavaScript中，`...总的来说，理解和掌握`clientHeight`、`offsetHeight`和`scrollHeight`的差异是进行JavaScript页面交互和布局优化的基础，它们提供了对网页内容可视部分、总尺寸以及可滚动部分的精确控制。
Js中 关于top、clientTop、scrollTop、offsetTop等
- 使用 `event.clientX` 和 `event.clientY` 获取鼠标相对于视口的位置，但若想得到相对于整个文档的位置，则需加上 `document.documentElement.scrollTop` 或 `document.documentElement.scrollLeft`。 ```...
在JavaScript中，处理页面元素的位置和尺寸时，经常会用到几个关键属性，如`scrollHeight`、`scrollWidth`、`scrollLeft`和`scrollTop`。这些属性在不同的场景下有着各自独特的用途，理解它们之间的差异是进行网页...
例如，通过`scrollTop`和`scrollHeight`可以判断元素是否已滚动到底部，从而触发加载更多内容的事件。而`offsetTop`和`offsetHeight`则可用于计算元素在屏幕中的位置，实现如悬浮按钮等效果。理解并熟练运用这些属性...
本教程将详细讲解如何利用jQuery实现一个简单的、具有图片按钮和渐入渐出效果的“返回顶部”功能，并且这个功能在IE浏览器6到11版本上都能正常工作。 首先，我们需要引入jQuery库。jQuery是一个轻量级的JavaScript...
Js 中关于 top、clientTop、scrollTop、offsetTop 的详细知识点 在 JavaScript 中，理解 top、clientTop、scrollTop、offsetTop 等属性是非常重要的，这些属性都是用于获取或设置 HTML 元素的位置和尺寸的。下面...
本文将详细介绍如何使用原生JavaScript实现一个适应PC和移动设备，且兼容到IE7的"scrollTop"回到顶部库。 一、scrollTop属性 在JavaScript中，`scrollTop`属性用于获取或设置元素的垂直滚动位置。对于一个元素（如...
在前端开发中，了解HTML元素的各种尺寸属性是基础中的基础，它们对于元素的布局和定位至关重要。...通过本篇文章提供的知识点，开发者可以巩固前端面试中关于元素尺寸属性的基础，同时也可以加深对DOM操作的理解。
尤其是在处理复杂的网页布局时，正确理解和使用`top`、`clientTop`、`scrollTop`、`offsetTop`等属性对于实现精确的页面操作至关重要。下面将详细介绍这些属性的概念、用法以及它们之间的区别。 ### 1. `clientTop`...
### JavaScript中的`scrollTop()`方法和`scroll()`方法详解 #### 一、`scrollTop()`方法概述 `scrollTop()`方法是...以上就是关于JavaScript中`scrollTop()`方法和`scroll()`方法的详细介绍，希望对你有所帮助。
当需要在某些异步操作之后修改DOM属性，比如滚动位置时，应该利用Vue提供的生命周期钩子和方法来保证操作的顺序性和准确性。本文提供了一种常见问题的解决方案，并详细说明了如何在Vue项目中正确地使用滚动功能。...
下面将详细探讨`scrollTop`的使用和相关知识点。 首先，`scrollTop`是一个获取或设置元素垂直滚动位置的方法。当用作读取属性时，它返回元素顶部距离视口顶部的距离；当用作写入属性时，它会使元素的顶部与视口顶部...
Js 中关于 top、clientTop、scrollTop、offsetTop 在 JavaScript 中，top、clientTop、scrollTop 和 offsetTop 是四个常用的属性，它们都与元素的位置或尺寸相关。下面，我们将详细介绍这四个属性的含义、用法和...