Question

我写了一个简单聊天风格程序的小片段。

<html>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("button").on("click", function(){
                $('.inner').scrollTop($('.container')[0].scrollHeight);
                var a = new Date();
                $(".container").append("<p>"+a+"</p>");
                if($(".container").height()>$(".inner").height()){
                    $(".container").css("bottom", "auto");
                }
            });
        });
    </script>


    <style type="text/css">
        .wrapper{
            width:300px;
            height: 500px;
            overflow: hidden;
        }

        .inner{
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            background-color: #ccc;
            position: relative;
        }

        .container{
            position: absolute;
            bottom: 0;
            background-color: yellow;
        }
    </style>
    <body>

        <div class="wrapper">
            <div class="inner">
                <div class="container">
                    <p>Hey buddy!</p>
                </div>
            </div>
        </div>
        <button>Try Me!</button>

    </body>
</html>

程序现在正在运行，但滚动条不会滚动到底部。我做错了什么？请帮我jsfiddle。

Answer 1

添加新的html后，您只需滚动

demo

$(function(){
    $("button").on("click", function(){

        var a = new Date();
        $(".container").append("<p>"+a+"</p>");
        if($(".container").height()>$(".inner").height()){
            $(".container").css("bottom", "auto");
        }
        $('.inner').scrollTop($('.container')[0].scrollHeight);
    });
});

Answer 2

你也可以这样试试，

 $("button").on("click", function(){
     $(document).scrollTop($(document).height());
    });

如何使用jQuery将滚动条保持在底部？

2 个答案: