加载更多内容 div 并在“加载更多”按钮处停止页面

Question

我想应用一个加载 div 的示例，

问题是在加载过程中，页面并没有停在加载更多按钮以显示新显示的div，而是继续到页面底部

我想在最后一个 div 处停止显示？

有什么想法吗？

$(function () {
    $("div").slice(0, 8).addClass('display');
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 8).addClass('display');
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

$('a[href=#top]').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});

body {
    background-color: #f6f6f6;
    width: 400px;
    margin: 20px auto;
    font: normal 13px/100% sans-serif;
    color: #444;
}
div {
    height: 80px;
    display:none;
    padding: 10px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    margin-bottom: 5px;
    background-color: #f1f1f1;
    /*display: inline-block;*/
}
div.display {
    display: inline-block;
}
a, a:visited {
    color: #33739E;
    text-decoration: none;
    display: block;
    margin: 10px 0;
}
a:hover {
    text-decoration: none;
}
#loadMore {
    padding: 10px;
    text-align: center;
    background-color: #33739E;
    color: #fff;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
}
#loadMore:hover {
    background-color: #fff;
    color: #33739E;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
<div>Content 4</div>
<div>Content 5</div>
<div>Content 6</div>
<div>Content 7</div>
<div>Content 8</div>
<div>Content 9</div>
<div>Content 10</div>
<div>Content 11</div>
<div>Content 12</div>
<div>Content 13</div>
<div>Content 14</div>
<div>Content 15</div>
<div>Content 16</div>

<a href="#" id="loadMore">Load More</a>

<ul>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
</ul>

点击按钮的结果：

我需要：

Answer 1

你的意思是这样的吗

$(function () {
    $("div").slice(0, 8).addClass('display');
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 8).addClass('display');
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top - $(window).height() + 3 * ($(this).height())
        }, 1500);
    });
});

$('a[href=#top]').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});

body {
    background-color: #f6f6f6;
    width: 400px;
    margin: 20px auto;
    font: normal 13px/100% sans-serif;
    color: #444;
}
div {
    height: 80px;
    display:none;
    padding: 10px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    margin-bottom: 5px;
    background-color: #f1f1f1;
    /*display: inline-block;*/
}
div.display {
    display: inline-block;
}
a, a:visited {
    color: #33739E;
    text-decoration: none;
    display: block;
    margin: 10px 0;
}
a:hover {
    text-decoration: none;
}
#loadMore {
    padding: 10px;
    text-align: center;
    background-color: #33739E;
    color: #fff;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
}
#loadMore:hover {
    background-color: #fff;
    color: #33739E;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
<div>Content 4</div>
<div>Content 5</div>
<div>Content 6</div>
<div>Content 7</div>
<div>Content 8</div>
<div>Content 9</div>
<div>Content 10</div>
<div>Content 11</div>
<div>Content 12</div>
<div>Content 13</div>
<div>Content 14</div>
<div>Content 15</div>
<div>Content 16</div>

<a href="#" id="loadMore">Load More</a>

<ul>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
</ul>

Answer 2

你需要将第一个隐藏的 div 保存在 JS 对象中（如果有的话），并使用它的 top 属性来滚动动画。

请检查以下解决方案：

$(function () {
    $("div").slice(0, 8).addClass('display');
    var scrollTopReq, tmpDivObj;
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        tmpDivObj = $("div:hidden").first();
        $("div:hidden").slice(0, 8).addClass('display');
        scrollTopReq = tmpDivObj.offset().top;
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: scrollTopReq
        }, 1500);
    });
});

$('a[href=#top]').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});

body {
    background-color: #f6f6f6;
    width: 400px;
    margin: 20px auto;
    font: normal 13px/100% sans-serif;
    color: #444;
}
div {
    height: 80px;
    display:none;
    padding: 10px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    margin-bottom: 5px;
    background-color: #f1f1f1;
    /*display: inline-block;*/
}
div.display {
    display: inline-block;
}
a, a:visited {
    color: #33739E;
    text-decoration: none;
    display: block;
    margin: 10px 0;
}
a:hover {
    text-decoration: none;
}
#loadMore {
    padding: 10px;
    text-align: center;
    background-color: #33739E;
    color: #fff;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
}
#loadMore:hover {
    background-color: #fff;
    color: #33739E;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
<div>Content 4</div>
<div>Content 5</div>
<div>Content 6</div>
<div>Content 7</div>
<div>Content 8</div>
<div>Content 9</div>
<div>Content 10</div>
<div>Content 11</div>
<div>Content 12</div>
<div>Content 13</div>
<div>Content 14</div>
<div>Content 15</div>
<div>Content 16</div>

<a href="#" id="loadMore">Load More</a>

<ul>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
</ul>