Retain scroll position after DOM Manipulation - jQuery

Question

This is one jQuery function:

$(document).on('change', '.tickbox', function () {
    //Some code here....
    $('.cD').click();
});

which calls another jQuery function:

$(document).on('click', '.cD', function (e) {
    //Some Code Here...
    document.getElementById('gc' + goal).innerHTML = calendar_html; //Problem Here
    $('#gc' + goal).hide();
});

The problems is after the complete execution, the scrollbar position returns to the top of the screen, instead of being just wherever it was.

How do I deal with this?

EDIT:

The contents of calendar_html is:

<table class="calendarTable"><tbody><tr><td class="monthHead" colspan="7">December 2013</td></tr><tr><td class="weekDay">Su</td><td class="weekDay">Mo</td><td class="weekDay">Tu</td><td class="weekDay">We</td><td class="weekDay">Th</td><td class="weekDay">Fr</td><td class="weekDay">Sa</td></tr><tr></tr><tr><td class="monthDay"> 1 </td><td class="monthDay"> 2 </td><td class="monthDay"> 3 </td><td class="monthDay"> 4 </td><td class="monthDay"> 5 </td><td class="monthDay"> 6 </td><td class="monthDay"> 7 </td></tr><tr><td class="monthDay"> 8 </td><td class="monthDay"> 9 </td><td class="monthDay"> 10 </td><td class="monthDay"> 11 </td><td class="monthDay"> 12 </td><td class="monthDay"> 13 </td><td class="monthDay"> 14 </td></tr><tr><td class="monthDay"> 15 </td><td class="monthDay"> 16 </td><td class="monthDay"> 17 </td><td class="monthDay"> 18 </td><td class="monthDay"> 19 </td><td class="monthDay"> 20 </td><td class="monthDay"> 21 </td></tr><tr><td class="monthDay"> 22 </td><td class="monthDay"> 23 </td><td class="monthDay"> 24 </td><td class="monthDay"> 25 </td><td class="monthDay"> 26 </td><td class="monthDay"> 27 </td><td class="monthDay"> 28 </td></tr><tr><td class="monthDay"> 29 </td><td class="monthDay"> 30 </td><td class="monthDay"> 31 </td></tr></tbody></table>

or

var calendar_html = '<table class="calendarTable">';
    calendar_html += '<tr><td class="monthHead" colspan="7">' + months[month] + ' ' + year + '</td></tr>';
    calendar_html += '<tr>';
    var first_week_day = new Date(year, month, 1).getDay();
    for(week_day= 0; week_day < 7; week_day++) {
    calendar_html += '<td class="weekDay">' + weekDay[week_day] + '</td>';
    }
    calendar_html += '</tr><tr>';
    // Fill the first week of the month with the appropriate number of blanks.
    for(week_day = 0; week_day < first_week_day; week_day++) {
        calendar_html += '<td> </td>';
    }
    week_day = first_week_day;
    for(day_counter = 1; day_counter <= days_in_this_month; day_counter++) {
        week_day %= 7;
        if(week_day == 0)
            calendar_html += '</tr><tr>';
            calendar_html += '<td class="monthDay"> ' + day_counter + ' </td>';
week_day++;
    }
    calendar_html += '</tr>';
    calendar_html += '</table>';

Answer 1

What type of element is .cD? If it's an anchor tag, try to include e.preventDefault(); at the top of the second function.

If not, you can curry the scroll position using http://api.jquery.com/scrollTop/

var scrollPosition, $html = $("html, body");

$(document).on('change', '.tickbox', function () {
    //Some code here....
    scrollPosition = $html.scrollTop();
    $('.cD').click();
});

$(document).on('click', '.cD', function (e) {
    //Some Code Here...
    document.getElementById('gc' + goal).innerHTML = calendar_html; //Problem Here
    $('#gc' + goal).hide();
    if (scrollPosition) { 
        $html.scrollTop(scrollPosition);
        scrollPosition = undefined;
    }
});