天天看点

滚动条控制 div的显示与隐藏。

    昨天在论坛上看见一个兄弟在提这个问题,就自己作了一个小例子,感觉很有意思,今天放了上来

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <script language='javascript'>

     function get_scrollTop_of_body(){

        var a = document.getElementById('div1');

        var scrollTop;

        if(typeof window.pageYOffset != 'undefined'){

            scrollTop = window.pageYOffset;

        }

        else

          if(typeof document.compatMode != 'undefined' &&

             document.compatMode != 'BackCompat'){

             scrollTop = document.documentElement.scrollTop;

             }

          else

             if(typeof document.body != 'undefined'){

               scrollTop = document.body.scrollTop;

             }

        if(scrollTop!=0)

        {

           a.style.display='block';

        }

        else

        {

           a.style.display='none';

        }

}

  </script>

 </HEAD>

 <BODY οnscrοll='get_scrollTop_of_body()'>

 <a name="tt">

 aaaaa<br>

  aaaaa<br>

   aaaaa<br>

    aaaaa<br>

     aaaaa<br>

      aaaaa<br>

       aaaaa<br>

        aaaaa<br>

        <div id="div1" width="200" style='display:none;'><a href="#tt" target="_blank" rel="external nofollow" >回到顶部</a></div>

 aaaaa<br>

  aaaaa<br>

   aaaaa<br>

    aaaaa<br>

     aaaaa<br>

      aaaaa<br>

       aaaaa<br>

        aaaaa<br>

 aaaaa<br>

  aaaaa<br>

   aaaaa<br>

    aaaaa<br>

     aaaaa<br>

      aaaaa<br>

       aaaaa<br>

        aaaaa<br>

 aaaaa<br>

  aaaaa<br>

   aaaaa<br>

    aaaaa<br>

     aaaaa<br>

      aaaaa<br>

       aaaaa<br>

        aaaaa<br>

 aaaaa<br>

  aaaaa<br>

   aaaaa<br>

    aaaaa<br>

     aaaaa<br>

      aaaaa<br>

       aaaaa<br>

        aaaaa<br>

  <script language="javascript">

    var divView = document.getElementById('div1');

    alert(document.body.clientWidth-divView.offsetWidth);

    divView.style.position="absolute";

    divView.style.right = "10px";

    divView.style.bottom = "20px";

 </script>

 </BODY>

</HTML>

继续阅读