1

我想在网站上动态显示我的投资组合内容 - 通过 ajax 重新加载整个页面（页眉 + 内容 + 页脚），现在它工作正常，但网站很长，它在加载底部后显示 - 如何自动加载后滚动到投资组合部分？我试过使用.scrollTo()但它不起作用（也许我把它放在错误的行 - 请看看我的代码：

$(function(){
  $(".screen.fifth a[rel='tab']").click(function(e){
    //e.preventDefault();
    /*
    if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
    if commented, html5 nonsupported browers will reload the page to the specified link.
    */

    //get the link location that was clicked
    pageurl = $(this).attr('href');

    //to get the ajax content and display in div with id 'content'
    $.ajax({url:pageurl+'?rel=tab',success: function(data){
      $('.screen.fifth .main_wrapper').html(data);
    }});

    //to change the browser URL to the given link location
    if(pageurl!=window.location){
      window.history.pushState({path:pageurl},'',pageurl);
    }
    //stop refreshing to the page given in
    return false;
  });
});

请帮忙！

编辑：

我已将此页面的链接更改为<a href=".../project_one.php#project_tag">chrome，它工作得很好，但在 Firefox 中，它的行为就像我之前描述的那样：/

4

2 回答 2

1

使用这个功能：

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top - 30},'slow');
}

它滚动到输入的 id，因此，如果您想滚动到#portfolio_tag然后调用：

goToByScroll('portfolio_tag');

一旦 AJAX 调用完成。

于 2013-01-11T10:32:12.500 回答
1

看起来正在发生的事情是页面跳转到#projects锚点，然后页面在加载时调整大小。

因此，如果您输入以下内容：

goToByScroll( window.location.hash.substring(1) );

在页面($('.map').width(myWidth);)在 ready 和 resize 函数中调整大小的代码之后，应该可以解决您的问题

于 2013-01-11T16:07:43.357 回答