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

时间:2013-12-25 16:19:56

标签: javascript jquery scroll

这是一个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>';

1 个答案:

答案 0 :(得分: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;
    }
});