javascript - 如何使页面向下滚动，因为页脚 div 使用 slideDown 扩展得很大？

Question

我有一个默认显示为无的页脚区域。这个底部页脚区域包含菜单和社交链接等内容。

为了看到这个菜单，你向下滚动到页面的底部(一直滚动到底部，所以你不能再滚动了)。在那里，您会看到并单击一个显示“展开”的按钮。执行此操作后，包含内容的展开按钮下方的 div 将使用 slideDown() 进行动画处理。

问题是当页面向下滚动时，页面不会随着 div 的底部边缘滚动……所以乍一看似乎什么都没有发生，直到您意识到必须再向下滚动一点。我希望它以与动画完全相同的速度/长度自动滚动页面。

这里是点击函数

$('#footer-click a').click(function() {
    if ($('#footer-inner').css('display') === 'none') {
        $('#footer-click a').html('Hide');
        $('#footer-inner').slideDown('medium');
} else {
        $('#footer-click a').html('Expand');
        $('#footer-inner').slideUp('medium');
    }
return false;
});

Answer 1

您应该能够使用 scrollTop() 来滚动额外的距离:

$('#footer-click a').click(function() {
    if ($('#footer-inner').css('display') === 'none') {
        $('#footer-click a').html('Hide');
        $('#footer-inner').slideDown('medium', function() {
            $('html').scrollTop( $('html').scrollTop() + $('#footer-inner').outerHeight() );
        });
    } else {
        $('#footer-click a').html('Expand');
        $('#footer-inner').slideUp('medium');
    }
    return false;
});

当然，这将使它在最后一次发生。您可能需要自定义动画以使其流畅。 (让我想想……)

编辑:好的，您可能想要做的只是show() 页脚，然后使用动画向下滚动页面。它给出了相同的效果。您可以像以前一样关闭它:

$(function() {
    $('#footer-click a').click(function() {
        if ($('#footer-inner').css('display') === 'none') {
            $('#footer-click a').html('Hide');
            $('#footer-inner').show();
            // Some browsers use html, some use body.  Use the bigger one:
            var scrollY = $('body').scrollTop()?$('body').scrollTop():$('html').scrollTop();
            $('html, body').animate({
                scrollTop: scrollY + $('#footer-inner').outerHeight()
            }, 'medium');
        } else {
            $('#footer-click a').html('Expand');
            $('#footer-inner').slideUp('medium');
        }
        return false;
    });
});

示例:http://jsfiddle.net/Eeq26/4/

如果页脚有可能不在最底部，您将需要一个 if..then 来检查 scrollTop() == 0 ，并在这种情况下使用 slideDown()。