滚动到页面底部，仅当用户在DOM操作之前已经位于底部时

Question

我想学习如何使用window.scrollTo。

这是所需的行为：

1. 确定用户是否滚动到页面底部，或者看不到滚动条
2. 然后我想要成长DIV，这是有效的
3. 如果＃1为真，请在DIV增加后使用window.scrollTo滚动到页面底部，这会改变窗口高度。

想法？

Answer 1

根据Han的想法，我们可以检测窗口是否像这样滚动到底部：

$('button').click(function(){
    var shouldScroll = $(document).scrollTop() + $(window).height() === $(document).height();
    $('<div>added content</div>').appendTo('body');
    if(shouldScroll) {
      $(window).scrollTop(document.body.scrollHeight);
    }
});

在此处更新了jsFiddle：http://jsfiddle.net/JamesKovacs/nQntc/1/

Answer 2

首先，您必须检查是否位于页面底部。使用Gaby对Determining when scrolled to bottom of a page with Javascript的回答我得到了：

function scrollbarAtBottom() {
    var totalHeight, currentScroll, visibleHeight;

    if (document.documentElement.scrollTop)
        currentScroll = document.documentElement.scrollTop;
    else
        currentScroll = document.body.scrollTop;

    totalHeight = document.body.offsetHeight;
    visibleHeight = document.documentElement.clientHeight;

    if (totalHeight <= currentScroll + visibleHeight)
        return true;
    else
        return false;
}

接下来，如果scrollbarAtBottom返回的值为true，您可以操纵DOM并滚动到底部：

var atBottom = scrollbarAtBottom();

/* do some stuff */

if (atBottom)
    if (document.documentElement.scrollTop)
        document.documentElement.scrollTop = document.documentElement.clientHeight;
    else
        document.body.scrollTop = document.body.clientHeight;

Answer 3

$(window).scrollTop(document.body.scrollHeight);

测试用例：http://jsfiddle.net/nQntc/