在 DOM 操作 - jQuery 后保留滚动位置

Question

这是一个jQuery函数：

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

它调用另一个jQuery函数：

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

问题在于在完成执行后，滚动条位置返回到屏幕顶部，而不是刚好在原处。

我该如何处理？

编辑：

calendar_html的内容是：

<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>

或

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

.cD是什么类型的元素？如果是 a nchor 标签，请尝试在第二个函数的顶部包含 e.preventDefault();。

如果没有，您可以使用 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;
    }
});