滚动顶部的问题答案

【问题标题】：problem with scrollTop滚动顶部的问题
【发布时间】：2010-04-12 11:54:53
【问题描述】：

我有以下标记：

<div style="overflow:auto;width:500px;height:100px;">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

我正在用 jQuery 添加一个新的列表项。如果它被隐藏，我怎样才能使它可见（将 div 滚动到它）？

我尝试了UL.scrollTop(nuLI.top);，但没有成功。

【问题讨论】：

标签： jquery html scrolltop

【解决方案1】：

您需要在溢出的元素上调用scrollTop()，它是<div> 元素，而不是<ul> 元素。此外，您需要通过element.position().top 获取top，并且您需要确保使用position: relative 相对定位<div> 元素，因为top 是相对于第一个相对父元素的。

这是SSCCE：

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2621792</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#div').scrollTop($('#li3').position().top);
            });
        </script>
        <style>
            #div {
                position: relative;
                overflow: auto;
                width: 100px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div id="div">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li id="li3">Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </ul>
        </div>
    </body>
</html>

【讨论】：

【解决方案2】：

我尝试过@BalusC 方法，但是如果滚动已经到达底部，它会反弹回来。然后我发现，通过在实际 scrollTop 之前插入“.scrollTop(0)”将保持滚动位置。

$('#div').scrollTop(0).scrollTop($('#li3').position().top);

【讨论】：