如何通過jquery實現“跳轉”？

Question

我正在開發一個網站，該網站根據用戶單擊的菜單圖標加載不同的頁面。 我和一個朋友寫了這個javascript函數：

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')"/>

它非常有用，除非嘗試跳轉到特定的div ID。 例如，

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

取出.scrollTo（0,0）不能解決問題。 我放入該行以確保在更改頁面時頁面一直向上滾動（否則，如果您位於頁面中間，並單擊菜單圖標，則新頁面將顯示在頁面中間）。

我錯過了什么？ 如何獲取鏈接以跳轉到div ID？

Answer 1

這兩個網址沒有不同。 帶有書簽的代碼只會獲得相同的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);
        }
    });
}

然后將目標的ID作為另一個參數。 如果不可能，您也可以在網址中搜索#並找到ID /或錨點。

Answer 2

首先，您應該在代碼中保留window.scrollTo(0,0) ，以使頁面在每次單擊菜單項時都位於頂部。

其次，如果點擊正在調用的菜單圖標

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

您的意圖是打開'somePage'並滾動到元素ID為'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);
    });
}