Question

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

为了看到这个菜单，你向下滚动到页面的底部（一路上，所以你不能滚动得更远）。在那里，您看到并单击一个显示“展开”的按钮。一旦你这样做，扩展按钮下面的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()。

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

1 个答案: