Question

情景如下：

从RSS Feed链接到我的网站http://website.com/#anchorelement
我想跳转/滚动到#anchorelement

但是，在 #anchorelement准备就绪后，使用jQuery.load() 加载http://website.com/。因此，使用链接http://website.com/#anchorelement不会跳转到#anchorelement，因为在执行跳转时尚未加载元素。

有没有人对如何使这项工作有任何建议？是否可以使用javascript拦截锚点跳转并让它等到jQuery.load()调用完成后？

谢谢！

Answer 1

$(function(){
  // so this is inside your document ready function.
  // you need to add a callback
  $( somecontainer ).load('somecontent', function(){
    // after the content has been loaded
    // check if a hash is present in the location
    if( window.location.hash != '' ){ 
      // find an element with matching id
      var anchor = $( location.hash ).get(0);
      // if element was found scroll it into view
      if( anchor ){ anchor.scrollIntoView() }
    }
  });
});

Answer 2

如果要加载多个内容，请使用回调函数将其加载一个，如果要滚动其中一个，请在最后一个回调中调用函数滚动。

$(function ()
{
  //Get the hash and load your content
  var hash = location.hash.replace('#', '');
  loadLocationContent(hash);
});

function loadLocationContent(hash)
{
  $('container1').load("someContent1", function(){
    $('container2').load("someContent2", function(){
      $('container3').load("someContent3", function(){
        $('container4').load("someContent4", scrollToHashAfterContentLoad(hash));
      });
    });  
  });
}

function scrollToHashAfterContentLoad(hash, contentId)
{
  if (hash != '')
  {
    $('html, body').animate({ scrollTop: $('#' + hash).offset().top }, 2000);
  }
}

在通过jQuery.load（）加载外部元素后是否可以滚动到锚点？

2 个答案: