0

我正在开发一个网站，该网站根据用户单击的菜单图标加载不同的页面。我和一个朋友写了这个 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

这两个 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 回答