自动滚动到 div 底部后，允许用户向上滚动吗？

Question

这个网站有很多这样的问题。不过，他们似乎都没有帮助我。我正在尝试使用 javascript 和 jQuery 编写基于文本的浏览器游戏，作为构建我编码知识的基础。

我有一个 javascript 代码：

    window.setInterval(function(e) { //This function is the only way to get the scroll to bottom to work, for me.
        e = document.getElementById('console'); //'console' is the area that outputs the system text, after a user answers questions.
        e.scrollTop = e.scrollHeight - e.clientHeight; //It works without the '- e.clientHeight', but I read that this is proper.
    });

对于滚动到底部功能，这非常有效，但我到底如何允许用户向上滚动...查看发生了什么？

我没有发现以这种方式提出的问题，所以我不相信它是重复的。如果是这样，我想我会继续寻找。

-编辑-

好的...我想我的描述不够详细，所以让我尝试解决这个问题。

这是我的代码的第一部分的片段（我知道它现在的设置不是最好的，但这就是我学习的原因）：

Javascript/JQuery

    window.setInterval(function(e) { //'#console' scrolls to bottom <-- how do I let the user scroll up to review?
        e = document.getElementById('console');
        e.scrollTop = e.scrollHeight - e.clientHeight;
    });

    onkeyup = (function(e) { //On <enter> erase data in the ("input")
        if (e.keyCode == 13) {
            $("input").val("");
            e.preventDefault();
            return false;
        }
    });


    $(document).ready(function() {

        $("#console").fadeIn(3000); //A console to output answers and scenarios to

        $("form").submit(function() { //User input
            var input = $("#command_line").val(); //A nifty box to put your answers in

            var check = false;
            function check() { //If you don't follow directions this happens
            check = true;
            }


            //startup
            var yes = false;
            var no = false;
            currentarea = "Start";
            function start() { 
                while (yes != true && no != true && currentarea == "Start") { 
                    if (input == "yes") {
                        yes = true;
                        $("<p>Great! What is your gender? Type <u><b>m</b></u> for Male or <u><b>f</b></u> for Female.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                        clothes = s_clths;
                        document.getElementById("clothes").innerHTML = clothes;
                        currentarea = "Gender Assignment";
                        check();
                        return currentarea;
                    }
               }
               start();
         });

所以，基本上，在滚动到底部工作后，我注意到用户可能希望向上滚动以查看之前的语句所说的内容。现在，他们无法向上滚动。如果我需要一起制作另一个代码，那没关系，但我找不到适合我的代码。我已经尝试了从所有相关帖子中可以找到的所有建议，但没有成功。我已经在这玩了大约十二个小时了，我自己也搞不清楚。

HTML

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="scripts/jquery.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>

    <body>

        <div id="banner">
            <p>Welcome To ! An Epic Journey Awaites You!</p>
        </div>

        <div id="console_wrapper">
            <div id="console">
                <p id="Start">Would you like to begin your adventure? Type <u><b>yes</b></u> or <u><b>no</b></u>.</p>
                <p id="message_help" style="display: none;">Some help, if you need it.</p>
                <!--
                PLACEHOLDER: THIS IS WHERE YOUR CHOICES ARE INPUTED
                -->
                <div id="placeholder"></div>
            </div>
        </div>

        <form id="form" onsubmit="return false;">
            <input type="text" size="50" autofocus="autofocus" autocomplete="off" id="command_line" />
        </form>
        <script type="text/javascript" src="scripts/game.js"></script>
    </body>
    </html>

CSS

    #banner {
        width: auto;
        background-color: maroon;
        border-style: ridge;
        border-width: 5px;
        border-color: grey;
        text-shadow: 2px 2px orange;
    }
    #console_wrapper {
        border-style: ridge;
        border-width: 3px;
        border-color: grey;
        max-height: 150px;
        margin: 75px auto;
        margin-top: 12px;
        width: 44%;
    } 
    #console {
        display: none;
        height: 150px;
        text-align: center;
        margin-top: 0px;
        overflow-y: scroll;
    }
    #command_line {
        font-family: Times New Roman;
        font-size: 14px;
        border-style: ridge; 
        border-color: blue; 
        border-width: 4px;
        margin: auto;
    }
    body {
        background-color: black;
        border-style: ridge;
        border-width: 5px;
        border-color: red;
        width: 90%;
        max-height: 900px;
        margin: auto;
    }

Answer 1

我的问题的答案是：

$("#console").animate({ scrollTop: "999999999px" }, 'slow'); //Scroll the console to the bottom.