jQuery實作滾動到底部時自動載入更多程式碼分享-js教程-PHP中文網

首頁

web前端

js教程

jQuery實作滾動到底部時自動載入更多程式碼分享

Feb 23, 2018 am 09:54 AM

jquery 底部自動

本文主要和大家介紹了jQuery實現滾動到底部時自動加載更多的方法,涉及jQuery基於ajax動態操作頁面元素相關實現技巧,需要的朋友可以參考下，希望能幫助到大家。

這裡利用AJAX，實作捲動到底載入資料功能：

&lt;!DOCTYPE html&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head runat=&quot;server&quot;&gt;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(function () {
      AddSth();
    });
    $(function () {
      $(&quot;.main&quot;).unbind(&quot;scroll&quot;).bind(&quot;scroll&quot;, function (e) {
        var sum = this.scrollHeight;
        if (sum &lt;= $(this).scrollTop() + $(this).height()) {
          AddSth();
        }
      });
    });
    function AddSth() {
      $.ajax({
        type: &#39;POST&#39;,
        url: &quot;index.aspx/ReturnSth&quot;,
        dataType: &quot;json&quot;,
        contentType: &quot;application/json; charset=utf-8&quot;,
        //data: &quot;&quot;,
        success: function (data) {
          json = $.parseJSON(data.d);
          for (var i in json) {
            var tbBody = &quot;&lt;ul&gt;&lt;li&gt;&quot; + json[i].sth + &quot;&lt;/li&gt;&lt;/ul&gt;&quot;;
            $(&quot;.main&quot;).append(tbBody);
          }
          $(&quot;.main&quot;).append(&quot;&lt;hr /&gt;&quot;);
        }
      });
    }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
    &lt;p&gt;下拉加载更多&lt;/p&gt;&lt;br /&gt;
    &lt;p class=&quot;main&quot; style=&quot;border: 1px solid red; height: 700px; overflow: auto;&quot;&gt;&lt;/p&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

登入後複製