用户到达底部时如何加载新页面/网址答案

【问题标题】：How to load a new page/url when user reach the bottom用户到达底部时如何加载新页面/网址
【发布时间】：2014-06-19 13:21:12
【问题描述】：

我正在创建无限负载，这意味着当用户到达页面底部/特定 div 时会加载一个新页面。目前我有这个代码可以在点击时加载新页面。

$("#about").click(function(){
    // load about page on click
        $("#response").load("about.html");
    });

这里有没有人更清楚地知道如何在不点击/到达底部的情况下加载新页面

【问题讨论】：

标签： javascript jquery ajax infinite-scroll

【解决方案1】：

您想在用户滚动时使用 AJAX 加载其他内容。我建议将其他内容添加到他们已经查看的页面（例如，附加到主 div），而不是将它们转移到不同的页面。这将创造更好的用户体验。

【讨论】：

【解决方案2】：

将Scroll 事件与您的可滚动内容绑定

$("#scrollableContent").scroll(function(){
    if($("#scrollableContent").position().top + $("#scrollableContent").height() == $(window).height()){
        //AJAX Call
      $("#response").load("about.html");
    }
});

【讨论】：

【解决方案3】：

您可以像这样计算 Div 高度 + 滚动顶部位置：

var divHeight = ($("#about").height()+$("#about").scrollTop() ;

如果这大于或等于此 Div 内的表格高度，则表示用户已到达 Div 的末尾。你可以加载你想要的页面。

注意：你应该在这个 Div 中有一个表格。

【讨论】：

【解决方案4】：

您可以根据鼠标窗口位置发送 ajax 调用。

 var no=1;
    $(window).scroll(function () {
        if(no==1)
        {
            if ($(window).height() + $(window).scrollTop() == $(document).height()) {
                no=2;
                $.ajax({
                    type: "POST",
                    url: "about.html",
                    data: datas,
                    cache: false,
                    success: function(html){

                    }
                });
            }
        }
    });

当用户到达页面末尾时，将调用此 ajax 调用。您可以指定它出现的高度。

【讨论】：

你知道怎么做吗？手段代码
请参阅上面的代码，它会为您工作，请根据您的需要指定高度