var idx = 0; function addLine() { idx++; var $console = $("#console"); $console.append("<div>" + idx + "行目追加</div>"); //ここで一番下にスクロールする $console.scrollTop($console.prop("scrollHeight")); } function clearConsole() { $("#console").empty(); }
<div style="margin:16px;"> <div class="title">コンソール</div> <div class="roundbox"> <div id="console" class="console"></div> </div> <div style="margin-top:16px;"> <button onClick="addLine();">行追加</button> <button onClick="clearConsole();">クリア</button> </div> </div>
.title { font-family:sans-serif; font-size:16px; font-weight:bold; margin-bottom:8px; } .roundbox { border:solid #DFDFDF 1px; border-radius:4px; padding:14px; background-color:#FFF8DF; } .console { height:128px; overflow:auto; font-size:14px; color:#666; }