Home  >  Article  >  Web Front-end  >  documentbodyscrollTop的值总为零的解决办法 - starof

documentbodyscrollTop的值总为零的解决办法 - starof

WBOY
WBOYOriginal
2016-05-22 17:19:551679browse

有一个功能需要判断返回顶部按钮是否显示。

JS代码如下:

  <span style="color: #0000ff;">var</span> sTop =<span style="color: #000000;"> document.body.scrollTop;
    </span><span style="color: #0000ff;">if</span>(sTop>100<span style="color: #000000;">){
        document.getElementById(</span>"sm_top").style.display="block"<span style="color: #000000;">;
    }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
        document.getElementById(</span>"sm_top").style.display="none"<span style="color: #000000;">;
    }</span>

但是发现document.body.scrollTop一直是0。

查资料发现是DTD的问题。

页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。

页面没有DTD,即没指定DOCTYPE时,使用document.body。

IE和Firefox都是如此。

而我的页面加了,所以如下即可。

     <span style="color: #008000;">/*</span><span style="color: #008000;">判断回到顶部按钮显示与否</span><span style="color: #008000;">*/</span><span style="color: #000000;">
     window.onscroll</span>=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        </span><span style="color: #0000ff;">var</span> sTop =<span style="color: #000000;"> document.documentElement.scrollTop;
    </span><span style="color: #0000ff;">if</span>(sTop>100<span style="color: #000000;">){
        document.getElementById(</span>"sm_top").style.display="block"<span style="color: #000000;">;
    }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
        document.getElementById(</span>"sm_top").style.display="none"<span style="color: #000000;">;
    }
    }</span>

 

 

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/5238654.html有问题欢迎与我讨论,共同进步。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn