Scrolling div by ID

Question

I have an HTML page with this structure.

<div class="scrollBoxYe">
<table class="grid">
<tr><td class="wd0"><div id="20110701" class="lcday"><div class="lcleft">Fri 01</div><div class="lcmid">The Sacred Heart of Jesus, solemnity&nbsp;-&nbsp;<a href="#" onclick="window.open('http://evangelizo.org/www/popup-saints.php?language=AM&id=10309&fd=0', '', 'width=500,height=450,top=120,left=120,scrollbars=yes')">St. Gal, Bishop (c. 489-553)</a>,&nbsp;&nbsp;<a href="#" onclick="window.open('http://evangelizo.org/www/popup-saints.php?language=AM&id=10480&fd=0', '', 'width=500,height=450,top=120,left=120,scrollbars=yes')">Bl. Antonio Rosmini, Priest, Founder of the Institute of Charity (1797-1855)</a></div><div class="lcright">Jul</div></div></td>
</tr>
<tr><td class="we0"><div id="20110702" class="lcday"><div class="lcleft">Sat 02</div><div class="lcmid">Immaculate Heart of Mary - Memorial&nbsp;-&nbsp;<a href="#" onclick="window.open('http://evangelizo.org/www/popup-saints.php?language=AM&id=9906&fd=0', '', 'width=500,height=450,top=120,left=120,scrollbars=yes')">St. Bernardino Realino, Priest (1530-1616)</a></div><div class="lcright">Jul</div></div></td>
</tr>
<tr><td class="we0"><div id="20110703" class="lcday"><div class="lcleft">Sun 03</div><div class="lcmid"><a href="#" onclick="window.open('http://evangelizo.org/www/popup-saints.php?language=AM&id=9907&fd=0', '', 'width=500,height=450,top=120,left=120,scrollbars=yes')">St. Thomas, Apostle -Feast</a></div><div class="lcright">Jul</div></div></td>
</tr>
</table>
</div>
<script type="text/javascript">
    ScrollCalendar();
</script>

ScrollCalendar function should scroll to a div ID like 20110701, 20110702, 20110703.

function ScrollCalendar() {
    var d = new Date();
    calrow = d.formatDate("Ymd");
    document.write (calrow);
    var offscroll = window.parent.document.getElementById(calrow).offsetTop;
    document.write (offscroll);
    window.parent.document.getElementById("scrollBoxYe").scrollTop = offscroll;
}

In the function above the div ID which is retrieved with the variable calrow is determined correctly. However, the code doesn't come up with the right offset (offscroll) to scroll the div (scrollBoxYe). These are my questions:

1. If calrow is right (does show 20110701). Will getelementby ID interpret calrow as a string ID to retrieve the element? Should I make calrow into a string first? What's the right function to do that?
2. Is it wrong to search for the element with window.parent.document if all the page information is in one document? Should the code say instead document.getElementbyID("scrollBoxYe").scrollTop?
3. Is there a better way to scroll scrollBoxYe with the variable calrow?

Thanks.

Answer 1

There is a better way to scroll: element.scrollIntoView()

http://msdn.microsoft.com/en-us/library/ms536730(v=vs.85).aspx

It's not part of the standard but according to this it is supported by all browsers.