如何使用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

这两个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/或锚点。

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);
    });
}