0

ユーザーがクリックするメニュー アイコンに応じて異なるページを読み込む Web サイトを開発しています。友人と私はこの 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 にジャンプするためのリンクを取得するにはどうすればよいですか?

4

2 に答える 2

0

2 つの 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);
        }
    });
}

次に、ターゲットの ID を別のパラメーターとして指定します。それが不可能な場合#は、URL で検索して ID/ またはアンカーを見つけることもできます。

于 2013-09-20T05:21:48.443 に答える
0

まず第一に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);
    });
}
于 2013-09-20T05:58:46.923 に答える