如何监测html元素的scroll bottom事件

在做js返回顶部的效果时，要监听网页滚动条滚动事件，这个事件就是：window.onscroll。当onscroll事件发生时，用js获得页面的scrollTop值，判断scrollTop为一个设定值时，显示“返回面部”

js网页滚动条滚动事件

<style type="text/css">

#top_div{

position:fixed

bottom:80px

right:0

display:none

}

</style>

<script type="text/javascript">

window.onscroll = function(){

var t = document.documentElement.scrollTop || document.body.scrollTop

var top_div = document.getElementById( "top_div" )

if( t >= 300 ) {

top_div.style.display = "inline"

} else {

top_div.style.display = "none"

}

}

</script>

<a name="top">顶部<a>

<div id="top_div"><a href="#top">返回顶部</a></div>

<br />

<br />

<div>

这里尽量多些<br />以便页面出现滚动条，限于篇幅本文此处略去

</div>

例子语法解释

在 style 标签中首先定义 top_div css 属性：position:fixeddisplay:none是关键

javascript 语句中，t 得到滚动条向下滚动的位置，|| 是为了更好兼容性考虑

当滚动超过 300 （像素）时，将 top_div css

display 属性设置为显示(inline)，反之则隐藏(none)

必须设定 DOCTYPE 类型，在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度

把你的姓名和电话加上ID属性，比如

<input type="text1" id="xingming" name="姓名"/><br>电话：<input type="text2" id="dianhua" name="电话"/>

然后写下面的JS

function checkform() {

var xingming= document.getElementById("xingming").value

if (xingming== "") {

alert("姓名不能为空！")

return false

}

var dianhua= document.getElementById("dianhua").value

if (dianhua== "") {

alert("领料日期不能为空！")

return false

}

}

代码规范性有两种方法：

1、在线检查：http://validator.w3.org/；

2、工具检查，例如：Html Validator。

Html Validator是Firefox的一个附加组件，以前看《精通CSS》提到的一些工具都因为不方便而没使用，每次都是在W3C在线验证查看代码是否规范。虽说过于追求标准有时没必要，但可能就因为有这种“标准癖”，没通过验证总觉得代码还是有问题。这个扩展真是解决了我不少问题。

Html Validator验证起来很方便。本地验证速度比W3C的在线网页要快很多，页面打开就能查看存在多少个问题，几处错误几处警告都一目了然。

它的验证方式有3种：HTML 、Tidy、SGML解析器和连续。前两种分别适合HTML和XHTML的验证，第三种为两种模式各验证一遍。

---