Positioning-problem-when-scrolling-down-webpage with j query pop up calendar

Question

i have posted this again since the previous has been answered and beside, try to simplify the problem
I am trying a very simple code here by have so many break lines so i can scroll down to the page.  when i scroll down, click on the text box, the pop up calendar dosen't appear next to the text box, i appears all the way on the top.  is there the way to make the calendar appeas next to the text box.
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="scripts/jquery-1.9.0.js"></script>
<script src="scripts/jquery-ui.js"></script>
<script>
    $(function() {
       $("#datepicker").datepicker({ minDate: 0 });
</script>
<cfoutput> #repeatstring("<br>",100)# </cfoutput>
<cfform>
<cfinput type="text" value=""  id="datepicker" name="sale_date"  />
</cfform>
thanks

Answer 1

tried this but didn't work when scroll down to the bottom of the page.
<script>
    $(function() {
     $('.datetime').datepicker({
     dateFormat: 'm/d/yy',
     beforeShow: function (input, inst) {
         var offset = $(input).offset();
         var height = $(input).height();
         window.setTimeout(function () {
             inst.dpDiv.css({ top: (offset.top + height + 4) + 'px', left: offset.left + 'px' })
         }, 1);
</script>