Question

我想在网站上动态显示我的投资组合内容 - 通过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中它的行为与我之前描述的相同：/

Answer 1

使用此功能：

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

滚动到输入的ID，因此，如果要滚动到#portfolio_tag，请致电：

goToByScroll('portfolio_tag');

完成AJAX调用后。

Answer 2

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

所以，如果你提出以下内容：

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

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

在Ajax加载新内容后滚动到DOM id

2 个答案: