Why logging the textcontent makes it go to the scrollbar when scrollbar is not pinpointed to in the codes?

Why logging the textcontent makes it go to the scrollbar when scrollbar is not pinpointed to in the codes?

Hi Folks,
How are you? I wish you are fine. May I seek your inputs as I am stuck with something below?

Refer to the following html codes, and what I don't understand is why clicking on the last button, ie 4th button, which would print the text on the button to the log would actually get transferred to the scrollbox. 

Because clicking the 4th button merely logs the textcontent, but does it specifically identify the scroll box as the area to dump in the text?  Yet it works, astonishingly.
 click(function (event) {
                log(event.currentTarget.textContent);

For a start, just literally copy and paste the chunk below to your notepad textfile and save it as html, then open it in browser, and then click the 4th button, and you will see what I mean. 

<!DOCTYPE html>
<head>
    <title></title>

     <style>
         #collection {
             margin-top: 1em;
         }
         .logging {
            color:gray;
            background-color:black;
            border-bottom:1px solid white;
         }
     </style>

    <script>
        function log(message) {
            $("<div>").text(message).addClass('logging').prependTo("#log");
            $("#log").scrollTop(0);
        }

        $(function () {
$('#collection').buttonset();
$('#radiobuttons').buttonset();
$('a').button().click(function (event) {
event.preventDefault();
});
            $("button:first").button({
icons: {
primary: "ui-icon-arrowthick-1-n"
},
text: false
}).next().button({
icons: {
                    primary: "ui-icon-volume-on"
                }
}).next().button({
                icons: {
                    primary: "ui-icon-seek-end",
                    secondary: "ui-icon-stop"
                },
                text: false
            }).next().button({
                icons: {
                    primary: "ui-icon-gear",
                    secondary: "ui-icon-triangle-1-s"
                }
            }).click(function (event) {
                log(event.currentTarget.textContent);
            });
        });
    </script>
</head>
<body>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <br />
    <a href="#">An anchor</a>

    <div id="collection">
        <input type="checkbox" id="check1" /><label for="check1">Item 1</label>
        <input type="checkbox" id="check2" /><label for="check2">Item 2</label>
        <input type="checkbox" id="check3" /><label for="check3">Item 3</label>
    </div>

     <div id="radiobuttons">
        <input type="radio" id="radio1" name="radio" /><label for="radio1">Option 1</label>
        <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Option 2</label>
        <input type="radio" id="radio3" name="radio" /><label for="radio3">Option 3</label>
    </div>

    <br />
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</body>
</html>