scrollTop用法说明及图片文字向上滚动实例
<div style="width:200px;height:300px;background-color:#555555;overflow:auto;" id="外层">
<div style="width:100px;height:400px;background-color:#FFFF00;" id="内层">
这些文字显示在内层中。
</div>
</div>
上面是一个实例，外层的高度值是300px,内层的高度值是400px。很明显，“内层中的内容”高过了“外层”本身.当向下拖动滚动条时，有部分内容会隐没在“外层的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。
点击查看：效果预览
实例解释：初始状态下，内层的上边界和外层的上边界是重合的，没有任何内容超过外层上边界，当拖动滚动条到最底部时，内层的下边界与外层的下边界重合，超出的内容高度为：400px-300px=100px，这个也就是scrollTop值。
通过JS代码读取、写入scrollTop值
使用方式：element.scrollTop(而不是element.style.scrollTop)
1、读取scrollTop值，见实例代码：
<div style="width:200px;height:300px;background-color:#555555;overflow:auto;" id="outDiv">
<div style="width:100px;height:400px;background-color:#FFFF00;" id="inDiv">
这些文字显示在内层中。
</div>
</div>
<p>scrollTop值是：<span id="showValue"></span></p>
<script type="text/javascript">
var out_div = document.getElementById("outDiv");
out_div.onscroll=getValue; //读取scrollTop的值并显示出来
//注册onscroll事件并处理函数。当拖动滚动条时，会产生onscroll事件
var show_value = document.getElementById("showValue");
//onscroll事件的处理函数
function getValue() {
show_value.innerHTML=out_div.scrollTop; //读取"外层"此时的scrollTop的值并显示出来
}
getValue(); //页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0
</script>
点击查看：效果预览
2、写入scrollTop值
<div style="width:200px;height:300px;background-color:#555555;overflow:auto;" id="outDiv">
<div style="width:100px;height:400px;background-color:#FFFF00;" id="inDiv">
这些文字显示在内层元素中。
</div>
</div>
<p>scrollTop值是：<span id="showValue"></span></p>
<p><button type="button" onclick="out_Div.scrollTop=50;">把scrollTop设为50</button>
<button type="button" onclick="out_Div.scrollTop=500;">把scrollTop设为500</button>
</p>
<p>输入scrollTop的值:<input type="text" id="setValue" value="" />
<button type="button" onclick="setBtn()" name="setBtn">确定</button>
</p>
<script type="text/javascript">
var out_Div = document.getElementById("outDiv");
out_Div.onscroll=getValue;
//注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件
var span_showValue = document.getElementById("showValue");
//onscroll事件的处理函数
function getValue()
{span_showValue.innerHTML=out_Div.scrollTop;
//读取"外层元素"此时的scrollTop的值并显示出来
}
getValue();
//页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0
out_Div.scrollTop = 10;
//通过js语句来设置scrollTop的值,本条语句会触发onscroll事件，使得"读取scrollTop的值并显示出来"函数执行一次。
function setBtn()
{ if("" != document.getElementById("setValue").value)
out_Div.scrollTop = document.getElementById("setValue").value;
else alert("请输入一个数值");
}</script>
点击查看：效果预览
附件查看：源码下载
本博文章基本上属于原创或收集整理，都是心血结晶。
欢迎转载分享，转载请注明出处，谢谢！
本文地址：scrollTop用法说明及图片文字向上滚动实例