jQuery(document).on(’click’,’#ABC’,function(event){
alert(jQuery(’#XYZ’)[0].scrollHeight);
jQuery(’#XYZ’).scrollTop(jQuery(’#XYZ’)[0].scrollHeight);
});

<ul>
<li id="ABC">hoge</li>
</ul>

<div id="XYZ" style="overflow:auto;">
<br>
<br>
<br>
<br>
<br>
</div>

上記の様なスクリプトでhogeをクリックしたらdiv内のスクロールを一番下にしたいのですがうまくいきません。
2度目にクリックすると上手くいくのですが1度目のクリックでスクロールを一番下に持ってくる方法はありますでしょうか？

alertで出したダイアログには1度目には｢0｣が2度目にはスクロールした座標値が出ます。