scrollTop 和 scrollHeight 是两个不同的属性，分别表示滚动条的位置和元素的高度。
scrollTop 的值会随着页面滚动而变化，它的最大值等于 scrollHeight 减去视口的高度。
视口的高度可以用 window.innerHeight 或 document.documentElement.clientHeight 获取。
document.documentElement.scrollTop 或 document.body.scrollTop 可以用于获取页面内容相对于视口顶部的距离，这个距离取决于滚动条的位置，元素的高度和视口的高度。
通过这个距离，我们可以判断页面是否滚动到了底部或顶部，或者在页面的哪个位置。
在网页开发中，我们经常需要处理页面的滚动事件，比如监听滚动条的位置，实现懒加载，回到顶部等功能。为了实现这些功能，我们需要了解一些与滚动相关的属性，比如 scrollTop 和 scrollHeight。这两个属性虽然看起来很相似，但是它们的含义和用法是不同的。本文将介绍 scrollTop 和 scrollHeight 的区别和应用，帮助你更好地掌握页面滚动的原理和技巧。
scrollTop 是一个属性，它表示滚动条的位置，也就是页面内容相对于视口顶部的偏移量。视口是浏览器窗口中显示网页内容的区域，它的大小可以用 window.innerHeight 或 document.documentElement.clientHeight 获取。scrollTop 的值会随着页面滚动而变化，它的初始值为 0，表示页面内容和视口顶部对齐。当页面向下滚动时，scrollTop 的值会增加，表示页面内容向上移动了一定的距离。当页面向上滚动时，scrollTop 的值会减少，表示页面内容向下移动了一定的距离。
scrollTop 的值可以用 document.documentElement.scrollTop 或 document.body.scrollTop 获取，不同的浏览器可能支持不同的属性，所以一般需要做兼容性处理，比如：
scrollTop 的值也可以用 document.documentElement.scrollTop 或 document.body.scrollTop 设置，这样可以改变页面的滚动位置，比如：
document.documentElement.scrollTop = 100; // 将页面滚动到距离视口顶部 100 像素的位置
scrollTop 的值有一个上限，它不能超过 scrollHeight 减去视口的高度，也就是说，当页面滚动到底部时，scrollTop 的值等于 scrollHeight 减去视口的高度。这个上限可以用来判断页面是否滚动到了底部，比如：
// 页面滚动到了底部
scrollHeight 是一个属性，它表示元素的高度，也就是元素内容的总高度，包括超出视口的部分。scrollHeight 的值不会随着页面滚动而变化，它是一个固定的值，表示元素内容的实际高度。scrollHeight 的值可以用 document.documentElement.scrollHeight 或 document.body.scrollHeight 获取，不同的元素可能有不同的 scrollHeight，比如：
var scrollHeight = document.documentElement.scrollHeight; // 获取整个文档的高度
var scrollHeight = document.getElementById("content").scrollHeight; // 获取 id 为 content 的元素的高度
scrollHeight 的值不能用 document.documentElement.scrollHeight 或 document.body.scrollHeight 设置，它是一个只读的属性，不能被修改。scrollHeight 的值可以用来计算元素内容的可滚动范围，比如：
var maxScrollTop = scrollHeight window.innerHeight; // 获取元素内容的最大滚动距离
了解了 scrollTop 和 scrollHeight 的区别和用法，我们就可以利用它们来实现一些与页面滚动相关的功能，比如：
实现懒加载：懒加载是一种优化网页性能的技术，它的原理是只加载视口内的图片，当页面滚动到图片位置时，再动态加载图片。为了实现懒加载，我们需要知道图片相对于视口顶部的距离，这个距离可以用图片的 offsetTop 属性获取，它表示图片相对于其最近的定位父元素的偏移量。然后，我们需要判断图片是否进入了视口，这可以用 scrollTop 和 window.innerHeight 来判断，比如：
var img = document.getElementById("img"); // 获取图片元素
var offsetTop = img.offsetTop; // 获取图片相对于其最近的定位父元素的偏移量
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动条的位置
// 图片进入了视口
img.src = img.getAttribute("data-src"); // 动态加载图片
实现回到顶部：回到顶部是一种常见的网页交互，它的原理是将 scrollTop 的值设置为 0，这样可以让页面内容和视口顶部对齐。为了实现回到顶部，我们需要给一个按钮绑定一个点击事件，当点击按钮时，将 scrollTop 的值设置为 0，比如：
var btn = document.getElementById("btn"); // 获取按钮元素
// 点击按钮时
document.documentElement.scrollTop = 0; // 将滚动条的位置设置为 0
实现导航栏的固定：导航栏的固定是一种提高网页可用性的技术，它的原理是当页面滚动到一定的位置时，将导航栏的定位方式改为 fixed，这样可以让导航栏始终在视口的顶部。为了实现导航栏的固定，我们需要知道导航栏相对于视口顶部的距离，这个距离可以用导航栏的 offsetTop 属性获取，然后，我们需要判断页面是否滚动到了导航栏的位置，这可以用 scrollTop 来判断，比如：
var nav = document.getElementById("nav"); // 获取导航栏元素
var offsetTop = nav.offsetTop; // 获取导航栏相对于其最近的定位父元素的偏移量
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动条的位置
// 页面滚动到了导航栏的位置
nav.style.position = "fixed"; // 将导航栏的定位方式改为 fixed
nav.style.top = "0"; // 将导航栏的 top 值设置为 0