Как я могу достичь «прыжков» с помощью jquery?

Question

Я разрабатываю веб-сайт, который загружает разные страницы в зависимости от того, какой значок меню пользователь нажимает. Друг и я написал этот яваскрипт функции:

function loadPage(targetURL){ 
    $.get(targetURL, function(data) { 
    document.getElementById("placeholder").innerHTML=data; 
    window.scrollTo(0,0); 
    }); 
} 

И иконки меню кодируется так:

<img src="images/some_icon.png" title="Some Page" onclick="javascript:loadPage('pages/somePage.php')"/> 

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

<img src="images/some_icon.png" title="Some Page" onclick="javascript:loadPage('pages/somePage#someLocationOnPage.php')"/> 

Вывод .scrollTo (0,0) не решает проблему. Я поместил эту строку, чтобы обеспечить прокрутку страницы при изменении страниц (в противном случае, если бы вы были посередине страницы и щелкнули значок меню, новая страница будет отображаться в середине страницы).

Что я пропустил? Как я могу получить ссылку, чтобы перейти к div id?

Answer 1

Два URL не отличаются друг от друга. У одной с закладкой только один и тот же код HTML. Поскольку вы не указываете браузеру перейти к определенной закладке, он должен отображать ту же информацию. (Если ваш сервер не отправляет разную информацию для этой ссылки, конечно)

Думаю, вам придется вручную переместить представление в нужную закладку.

function loadPage(targetURL, targetID){ 
    $.get(targetURL, function(data) { 
     document.getElementById("placeholder").innerHTML=data; 
     if(targetID && $("#"+targetID).length != 0){ 
      $(document).scrollTop($("#"+targetID).offset().top); 
     } 
     else { 
      window.scrollTo(0,0); 
     } 
    }); 
} 

И затем укажите идентификатор для цели в качестве другого параметра. Если это невозможно, вы также можете найти # в URL-адресе и найти идентификатор/якорь.

Answer 2

Прежде всего, вы должны оставить в своем коде window.scrollTo(0,0), чтобы страница не переходила в начало страницы на каждый щелчок элемента меню.

Во-вторых, если при щелчке значка меню, который звонит

loadPage('pages/somePage#someLocationOnPage.php') 

ваши намерения открыть «somePage» и перейдите к позиции, где идентификатор элемента является «someLocationOnPage.php», то вы должны обновить свой метод loadPage для проверки детали после «#».

function loadPage(targetURL){ 
    $.get(targetURL, function(data) { 
     document.getElementById("placeholder").innerHTML=data; 
     window.scrollTo(0,0); 

     // Grab url part after '#' 
     var name = targetURL.substr(href.indexOf('#') + 1), target = $('a[name='+ name +']'), target2 = $('#' + name); 

     // Determine of bookmark is available or not 
     target = (target.length)? target : target2; 

     // Scroll to the bookmark 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     },400); 
    }); 
}