javascript - 当 url 上已有 # anchor 时如何滚动到特定元素

Question

我有一个基于 SkelJS 的网站，当前通过将 #anchor 附加到 URL 来加载网页的不同部分，如下所示:

请注意，#blog 加载博客页面，滚动条位于顶部。在博客页面内，我需要滚动到某篇文章。 如何使用两个 anchor 以便像 #blog#article_x 这样的内容起作用？我想我必须寻找解决方法，因为锚定 2 个 id 没有意义，有解决方法吗？

附加说明:

• 请注意，如果将 #blog 更改为 #article_x，它实际上会转到所需的文章，但如果有人共享链接，它不会转到该文章，因为它会在主页上查找 #article_x，但它不存在.
• 这是我正在使用的模板的演示 ( http://html5up.net/uploads/demos/astral/# )，请注意 #anchor 如何加载所需的页面。

Answer 1

您可以使用包含页面和元素的哈希。然后拆分，然后加载页面然后滚动，即 #blog,someelement

//on page load or wherever you detect the hash
$(function(){
   var hash = window.location.hash;
   var ele = null;
   //Detect if there is a splitable hash 
   if(hash.indexOf(",") != -1){
      var parts = hash.split(",");
      hash = parts[0];
      ele = jQuery("#"+parts[1]);
   }
   //whatever function you do to load the blog page
   loadPage(hash,ele);
});

function loadPage(page,ele){
   //do page loading
   $("#page").load("http://someurl.com",function(){
      //if there was no second part to the hash 
      //this will be skipped
      if(ele){
         $("html,body").animate({
            scrollTop: ele.offset().top
         },1000);
      }
   });
}

JSfiddle Demo