Question

我遇到了jQuery scrollTo插件的问题。我有2个DIV（nav2和content）并且我通过ajax调用填充它们：

var myJs = { ...
getWithAjax : function( targetFile, targetDivId, anchorId ) {
    // get is jquery function and wraps ajax call
    $.get(targetFile, function(data) {
        $('#'+targetDivId).html( data );
         if(anchorId !== null){
            myJs.doScrollTo(targetDivId, anchorId);
         }
    });

},

go : function(file1, file2) {
    var file1Array, file2Array = new Array();
    if(file1 !== null){
        file1Array = this.splitLinkFromAnchor(file1);
        // update nav2 div
        this.getWithAjax(file1Array[0], "nav2", file1Array[1]);
    },  //... same with file2 but other div "content" 

doScrollTo : function( divId, anchorId ) {
    $( '#' + divId ).scrollTo( '#' + anchorId, 0 );
}
// ... further functions
} // end of object literal

如您所见，在获取内容后，我追加它，然后尝试通过anchorId滚动到该目标div中的某个位置。这是通过doScrollTo - 包装jQuery-Plugin函数scrollTo的函数完成的。 go是ajax调用的包装器。在进行get-Requests之前，它从给定的输入参数中提取filename和id（由'＃'拆分）。以下是这一切的全部内容：

myJs.go( 'file_a.html#anchor1', 'file_b.html#anchor2' );"

编辑：使用一个DIV，nav2 DIV，一切正常。但其他DIV content有时会滚动，有时则不滚动。而且，如果滚动并且我向上移动DIV的滚动条然后再次调用go，则它不再滚动。正如我所说，这一切都适用于nav2 DIV ......

有人知道我做错了吗？

感谢。

Answer 1

$.get(targetFile, function(data) {
    $('#'+targetDivId).html( data );
});
if(anchorId !== null){
        this.doScrollTo(targetDivId, anchorId);
}

您在XMLHttpRequest完成之前调用doScrollTo。

这是您传递给$.get的回调函数的重点，它不会立即执行，而是仅在异步HTTP请求完成时执行。 get方法本身会立即返回，因此当您使用if到达下一行时，回调未运行并填充内容。

如果您希望在加载内容后立即进行滚动，则需要将该调用放入要传递给get的回调函数中。但请注意，this不会保留在回调函数中，因此您必须bind或使用闭包：

var that= this;
$.get(targetFile, function(data) {
    $('#'+targetDivId).html( data );
    if(anchorId !== null){
        that.doScrollTo(targetDivId, anchorId);
    }
});

jQuery scrollTo滚动两个DIV的问题

1 个答案: