js滚动条滚动到底部和顶部

Posted 逗比煎饼侠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js滚动条滚动到底部和顶部相关的知识，希望对你有一定的参考价值。

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <style type="text/css">  
  6.         .scrolldiv{  
  7.             width: 500px;  
  8.             height: 400px;  
  9.             margin: 1000px auto 100px auto;  
  10.             background: #f00;  
  11.         }  
  12.     </style>  
  13. </head>  
  14. <body>  
  15. <div class="scrolldiv"></div>  
  16.   
  17.   
  18. <script type="text/javascript">  
  19.     function scrollBottomOrTop(){  
  20.         var clients=window.innerHeight || document.documentElement.clientHeight||document.body.clientHeight;  
  21.         var scrollTop=document.body.scrollTop;  
  22.         var wholeHeight=document.body.scrollHeight;  
  23.         if(clients+scrollTop>=wholeHeight){  
  24.             alert(‘我到底部了‘);  
  25.         }  
  26.         if(scrollTop==0){  
  27.             alert(‘我到顶部了‘);  
  28.         }  
  29.     }  
  30.     window.onscroll=scrollBottomOrTop;  
  31. </script>  
  32. </body>  
  33. </html>  

以上是关于js滚动条滚动到底部和顶部的主要内容，如果未能解决你的问题，请参考以下文章