Команды очереди Javascript

Question

У меня есть виджет вкладки, настроенный на моем сайте с использованием JQuery 1.7.2 и JQuery UI 1.10.3.

Я написал JavaScript, который анализирует хэш-часть URL-адреса, чтобы я мог открыть вкладку, загрузить содержимое в div и прокрутить до именованного якоря.

Я могу получить вкладку для открытия, а контент для загрузки прекрасен, однако прокрутка к якорю оказывается настоящей болью.

Я могу заставить его работать, если я вызываю предупреждение перед прокруткой к якорю (заставляя вас нажимать «ОК», но если отключить оповещение (что я хочу), это не сработает.

Я предполагаю, что у него есть что-то делать с ожиданием функций завершения обработки первого? Но я очень неопытный с JavaScript так был бы признателен за любую помощь, кто может может дать.

URL example: http://www.mysite.com/abc.html#tab=tab-3&#srv=includes/xyz&#anc=myanchor 

Мой JavaScript является следующим образом:

$(document).ready(function() { 
    var parts = location.hash; 
    parts = parts.split('&'); // Hash parts of URL. 

    for (var i = 0; i < parts.length; i++) // Loop to separate variables. 
    { 
     if (parts[i].substr(1, 4).toUpperCase() == "TAB=") { 
      var tab = parts[i].substr(5).split("-").pop() - 1 
     } // Tab no. part from tab name. 
     if (parts[i].substr(1, 4).toUpperCase() == "SRV=") { 
      var srv = parts[i].substr(5) 
     } // Path to content to load. 
     if (parts[i].substr(1, 4).toUpperCase() == "ANC=") { 
      var anc = parts[i].substr(5) 
     } // Named anchor to locate. 
    }; 

    // Tab found in URL so we'll check it exists and open it. 
    if (tab == -1) // Tab not found? 
    { 
     tab = 0 // Default to 1st tab if not. 
    }; 

    $("#tabs").tabs("option", "active", tab); // Select the tab. 

    // Load content if provided in URL. 
    var href = $('.list li a').each(function() { 
     var href = $(this).attr('href'); 
     if (srv == href.substr(0, href.length - 5)) { 
      var toLoad = srv + '.html .maint_content'; 
      $('.maint_content').load(toLoad) 
     } 
    }); 

    // Load content when selected from list. 
    $('.list li a').click(function() { 
     var toLoad = $(this).attr('href') + ' .maint_content'; 
     $('.maint_content').fadeOut('normal', loadContent); 
     $('#load').remove(); 
     $('.maint_content').fadeIn('normal', loadContent); 
     $('#load').fadeIn('normal'); 
     window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5); 

     function loadContent() { 
      $('.maint_content').load(toLoad, '', showNewContent()); 
     } 

     function showNewContent() { 
      $('.maint_content').show('normal', hideLoader()); 
     } 

     function hideLoader() { 
      $('#load').fadeOut('normal'); 
     } 
     return false; 
    }); 

    // Scroll to locate anchor. 
    //alert(anc); 
    $('html, body').animate({ 
     'scrollTop': $('#' + anc).offset().top 
    }, 1000); 

}); 

Thanks

Answer 1

Я предполагаю, что якорь, с которым вы хотите перейти, находится в загруженном содержимом?

Если это так, просто добавьте обратный вызов для вызова Ajax и сделать прыжок туда:

$('.maint_content').load(toLoad,'',showNewContent()).done(function() { 
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
}); 

Answer 2

Вы ajaxing содержание дел. Это означает, что он загружается асинхронно. Таким образом, функция анимации вызывается до завершения загрузки содержимого, и якорь, который вы ищете, еще не существует.

Для того, чтобы поджечь анимации, когда загрузка будет завершена, вы можете передать функцию .load()

$('.maint_content').load(toLoad,'',showNewContent()); 

так что вы Allready получили, что: showNewContent срабатывает, когда по завершении загрузки. Итак, все, что вам нужно сделать, - это переместить анимационную линию в конец этой функции.

function showNewContent() 
{ 
    $('.maint_content').show('normal',hideLoader()); 
    $('html, body').animate({'scrollTop': $('#'+anc).offset().top}, 1000); 
}