document.body.scrollTop 的值总是等于 0 的解决方法;DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN 与 JS冲突

做页面的时候可能会用到浮动层，读取 document.body.scrollTop 来设置层的位置，如以下代码，可以达到让一个ID为“Div1”的层一直居中显示的目的：

<div id="_mcePaste">
  function Sc()
</div>

<div id="_mcePaste">
  {
</div>

<div id="_mcePaste">
  document.getElementById(&#8220;Div1&#8221;).style.top=document.body.scrollTop+(document.body.clientHeight-document.getElementById(&#8220;Div1&#8221;).offsetHeight)/2
</div>

<div id="_mcePaste">
  document.getElementById(&#8220;Div1&#8221;).style.left=document.body.scrollLeft+(document.body.clientWidth-document.getElementById(&#8220;Div1&#8221;).offsetWidth)/2;
</div>

<div id="_mcePaste">
  }
</div>

<div id="_mcePaste">
  window.onscroll=Sc;
</div>

<div id="_mcePaste">
  window.onresize=Sc;
</div>

<div id="_mcePaste">
  window.onload=Sc;
</div>

<div id="_mcePaste">
  </script>
</div>

但是却发现总是有问题，很奇怪啊，以前明明用过的，没有问题，这次是怎么回事呢。

用排除法慢慢试了试，发现居然跟第一行有关系……

有这行就不起作用，没有的话就可以起作用了，不过去掉这行DTD声明后，很多以前的样式都变了，要是为此去改样式的话，实在太麻烦了，经过查询，发现，有了DTD声明之后，document.body.scrollTop 的值就会总是等于0，解决办法就是在有 DTD 时用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以正常使用了。

总结：

• 页面具有 DTD（或指定了 DOCTYPE）时，使用 document.documentElement。
• 页面不具有 DTD（或没有指定了 DOCTYPE）时，使用 document.body。
• 在 IE 和 Firefox 中均是如此。
• 为了兼容（不管有没有 DTD），可以使用如下代码：

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