1. <style>
  2.         *{margin: 0;padding: 0}
  3.         body{
  4.             height: 2000px;
  5.             background: red;
  6.         }
  7.         div{
  8.             height: 1000px;
  9.             background: green;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div></div>
  15.     <!-- 判断滚动条是否到达底部 -->
  16.     <script>
  17.         /* 获取滚动区域的高度 */
  18.        /*  var scrollHeight = document.documentElement.scrollHeight;
  19.         console.log(scrollHeight);
  20.         window.onscroll = function(){
  21.             var scrollTop = Math.ceil(documentElement.scrollTop);
  22.             var availHeight = document.documentElement.clientHeight;
  23.             if(scrollTop+availHeight == scrollHeight){
  24.                 console.log("到达底部")
  25.             }
  26.         } */
  27.         window.onload = function(){
  28.             console.log(onReachBotton())
  29.         }
  30.     </script>

二、jquery-bottom

<style>
        body{
            height: 2000px;
            background: red;
        }
    </style>
</head>
<body>
    <script>
        var scrollHeight = $(document).height();
        var avaiHeight = $(window).height();
        $(window).scroll(function(){
            var scrollTop = $(document).scrollTop();
            if(avaiHeight+scrollTop==scrollHeight){
                console.log("已经到达底部")
            }
        })
    </script>