1. 程式人生 > >js滾動條滾動到底部和頂部

js滾動條滾動到底部和頂部

var margin wid XML oct clas scrip scrolltop css

  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. <script type="text/javascript">
  17. function scrollBottomOrTop(){
  18. var clients=window.innerHeight || document.documentElement.clientHeight||document.body.clientHeight;
  19. var scrollTop=document.body.scrollTop;
  20. var wholeHeight=document.body.scrollHeight;
  21. if(clients+scrollTop>=wholeHeight){
  22. alert(‘我到底部了‘);
  23. }
  24. if(scrollTop==0){
  25. alert(‘我到頂部了‘);
  26. }
  27. }
  28. window.onscroll=scrollBottomOrTop;
  29. </script>
  30. </body>
  31. </html>

js滾動條滾動到底部和頂部