overflow-y:scrollな要素を一番下までスクロールする

こんにちはこんにちは…！
突然だけど今日はちょっぴりテンション低めに、
要素のスクロールについてのお時間なんです…！

ぺろ
ぺろぺろ
ぺろぺろ
ぺろぺろ
ぺろぺろ

<div style="height:4em; overflow-y:scroll">
<ul id="peroZone">
<li>ぺろ</li>
<li>ぺろぺろ</li>
<li>ぺろぺろ</li>
<li>ぺろぺろ</li>
<li>ぺろぺろ</li>
</ul>
</div>
<input type="button" value="ぺろライン追加" onclick="add()" />

↑なんかこういうやつがあって…、
ボタンを押すたびに、ぺろぺろエリアの一番下に行が追加されるような仕掛けを作りたいとき…・。

<script>
function add() {
	// 行を追加するよ
	var peroZone = document.getElementById('peroZone');
	var li = document.createElement('li');
	li.appendChild(document.createTextNode('追加されたぺろ。'));
	peroZone.appendChild(li);
}
</script>

…こんなふうに普通にJavaScriptで適当に一番下に行を追加しても、
たぶんスクロールバーは一番上にくっついたままになっちゃう…。

…

ちょっと悩んだあげく、ぼくの考えついた、あまりきれいじゃないやり方はこんな感じ…。

<div style="height:4em; overflow-y:scroll">
<ul id="peroZone">
<li>ぺろ</li>
<li>ぺろぺろ</li>
<li>ぺろぺろ</li>
<li>ぺろぺろ</li>
<li>ぺろぺろ</li>
</ul>

<!-- ↓ついかしたやつ… -->
<input id="eom" type="text" style="width:1px; height:1px; disaply:none">
</div>

<input type="button" value="ぺろライン追加" onclick="add()" />

ぺろぺろエリアの最下行にダミーのinputを配置しておいて見えなくしておいて…
それで、行を追加するたびにダミーのinputをfocusしてみたり…。

<script>
function add() {
	// 行を追加するよ
	var peroZone = document.getElementById('peroZone');
	var li = document.createElement('li');
	li.appendChild(document.createTextNode('追加されたぺろ。'));
	peroZone.appendChild(li);

	// 隠しinputをfocusするよ
	document.getElementById('eom').style.display = 'inline';
	document.getElementById('eom').focus();
	setTimeout(function() { document.getElementById('eom').style.display = 'none' }, 100)
}
</script>