Scroll bar to the bottom to automatically load content

CSS section:

<styletype= "Text/css">Body{Background-color:#808080;        }#main{margin:0 Auto;width:960px;        }#content{position:Absolute;width:960px;        }#img{margin:0;padding:0;        }#img Li{List-style-type:None;Background-color:Salmon;margin:0;Margin-top:10px;Border-bottom:Solid 1px Hotpink;text-align:Center;Height:30px;        }    </style>

HTML section:

<DivID= "Main">    <DivID= "Content">        <ulID= "img">            <Li>1</Li>            <Li>2</Li>            <Li>3</Li>            <Li>4</Li>            <Li>5</Li>            <Li>6</Li>            <Li>7</Li>            <Li>8</Li>            <Li>9</Li>            <Li>10</Li>            <Li>11</Li>            <Li>12</Li>            <Li>13</Li>            <Li>14</Li>            <Li>15</Li>            <Li>16</Li>            <Li>17</Li>            <Li>18</Li>            <Li>19</Li>            <Li>20</Li>            <Li>21st</Li>            <Li>22</Li>            <Li>23</Li>            <Li>24</Li>            <Li>25</Li>            <Li>26</Li>            <Li>27</Li>            <Li>28</Li>            <Li>29</Li>            <Li>30</Li>        </ul>    </Div></Div>

JS part:JS part:(need to introduce jquery.js here)

<Scripttype= "Text/javascript">    //get the original content in the list    varcontent=document.getElementById ("img"). InnerHTML; //each time it is called, it adds a copy of the page's content, which you can write about the content or instructions you want to load.    functionAddli () {document.getElementById ("img"). InnerHTML+=content; }    /** Listen to the scroll bar, originally did not want to use jquery but found that JS inside the monitoring scroll bar event is not good to add, this way refers to the jquery of the $ (obj). scroll (); this method.*/$ (window). Scroll (function(){        //The following sentence is mainly to obtain the total height of the Web page, mainly to consider compatibility, so the IE support DocumentElement also wrote, this method supports at least IE8        varHtmlheight=Document.body.scrollHeight||Document.documentElement.scrollHeight; //clientheight is the visual height of the Web page in the browser,        varclientheight=Document.body.clientHeight||Document.documentElement.clientHeight; //ScrollTop is the top position of the browser scroll bar,        varscrolltop=Document.body.scrollTop||Document.documentElement.scrollTop; //determines whether the content is loaded by determining whether the top position of the scroll bar is equal to the height of the Web page and the width of the webpage.        if(scrolltop+clientheight==htmlheight)        {Addli (); }    })</Script>

Scroll bar to the bottom to automatically load content