jQuery scrollTo Проблема с прокруткой двух DIVs

Question

У меня проблемы с плагином jQuery scrollTo. У меня 2 DIVs (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 

Как вы видите, после получения контента я добавляю его, а затем попытаться перейти к определенной позиции в этот целевой div через anchorId. Это делается с помощью функции doScrollTo, которая обертывает функцию jQuery-Plugin scrollTo. go - это оболочка для вызовов ajax. Перед выполнением get-Requests он извлекает имя файла и идентификатор (split by '#') из заданных входных параметров. Вот как все это называется:

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

EDIT: С одной DIV, то nav2 ДИВ, все работает отлично. Но другой DIV content иногда прокручивается, иногда нет. А также, если он прокручивается, и я перемещаю полосу прокрутки DIV вверх, а затем снова вызываю go, она больше не прокручивается. И, как я уже сказал, все это прекрасно работает с nav2 DIV ...

Кто-нибудь понял, что я делаю неправильно?

Спасибо.

Answer 1

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

Вы звоните doScrollTo перед XMLHttpRequest завершена.

Вот и вся функция обратного вызова, которую вы передаете в $.get, не выполняется сразу, но только после завершения асинхронного HTTP-запроса. Метод get сам возвращается немедленно, поэтому обратный вызов не запускался и не заполнялся содержимым к тому времени, когда вы дойдете до следующей строки с помощью if.

Если вы хотите, чтобы прокрутка происходила сразу после загрузки содержимого, вам необходимо поместить этот вызов в функцию обратного вызова, которую вы передаете, до get. Но обратите внимание, что this не сохраняется в функции обратного вызова, так что вы должны были бы bind его или использовать замыкание:

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