当网址上已有＃锚时，如何滚动到特定元素

Question

我有一个基于SkelJS的网站，目前通过在网址上添加#anchor来加载网页的不同部分：

请注意，＃blog加载博客页面，滚动位于顶部。在博客页面内，我需要滚动到某篇文章。 如何使用两个锚点，以便像＃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

Answer 2

考虑到要滚动到的元素的ID是 myelement ，您可以使用以下jquery代码顺利滚动到它。

$("html,body").animate({scrollTop : $("#myelement").offset().top},1000);

Answer 3

我们可以在具有id或class

时滚动到特定div

 var $id=window.location.href.split('#')[1];
 $('html, body').scrollTop($("#"+$id).offset().top)