DIV 显示在屏幕外

Question

我正在使用我在另一个问题上找到的这个 html 和 jquery，它运行良好，但有一个例外。

它显示和隐藏 div，除非 div 靠近屏幕底部，否则它会显示但部分不在屏幕上。

无论如何要更新此代码，因此如果 DIV 部分不在屏幕上，则页面会自动滚动以进入视图？

HTML：

<ul id="list">
    <li>
        <a href="#" class="togglelink">America</a>
        <div class="toggle" style="display: block;">
            <p>America - USA - the States</p>
        </div>
    </li>
    <li>
        <a href="#" class="togglelink">Brazil</a>
        <div class="toggle" style="display: block;">
            <p>Brazil - Federative Republic of Brazil</p>
        </div>
    </li>
</ul>

JS：

$(document).ready(function () {
    $('.toggle').hide();
    $('a.togglelink').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.toggle')
        $('.toggle').not(elem).hide('slow');
        elem.toggle('slow');
    });
});

显然，任何其他显示且不在屏幕外的 div 都不应该受到影响。

非常感谢：-D

Answer 1

您可以通过 div 容器的 y 值和高度来确定 div 容器的位置。因此，您可以确定它何时不在屏幕上。然后你可能想添加一个视差滚动http://wedesignpixel.com/best-jquery-parallax-scrolling-tutorials/

Answer 2

使用 css 你可以根据你的要求调整 div 的位置，这样它就不会影响你其他 div 的位置