从另一个页面的固定标题下链接到锚点

Question

我试图从另一个页面（页面2）链接到一个页面（页面1）上的锚点。两个页面都有一个固定的标题。因此，我使用的两个页面上后续的脚本：

$(document).ready(function(){ 
    $('.testlink').bind('click', function(e) { 
     e.preventDefault(); 
     var sHref = this.href.split("#"); 
     var topDistance = $("#"+sHref[1]).position().top; 
     var tds = topDistance - 146 ; 
     $("html, body").animate({ scrollTop: tds }, 'slow');    
     return false;   
    }); 
}); 

实例链接：

<a href="../plan/medical.html#howdeductworks">How the deductible works</a> 

例锚链接：

<a id="howdeductworks"></a> 

此链接锚，然后偏移它，以便锚不在标题下。

当我从页面1链接到页面1上的锚点时，一切正常。当我链接到另一页上的脚本时，脚本不起作用，锚点位于标题下方。

我试图重新编码是这样的：

$(document).ready(function(){ 
    $('.testlink').bind('click', function(e) { 
     e.preventDefault(); 
     $(location).attr('href', $(this).attr('href')); 
     var sHref = this.href.split("#"); 
     var topDistance = $("#"+sHref[1]).position().top; 
     var tds = topDistance - 146 ; 
     $("html, body").animate({ scrollTop: tds }, 'slow'); 
     return false;   
    }); 
}); 

...但没有奏效。也许我写了我想做的不正确的事。如果是这样，我将不胜感激。

顺便说一句，如上所述，当从同一页面上的链接点击锚点时，页面不会刷新 - 它只是转到锚点。如果可能的话，我希望保持这种状态（意味着不刷新）。如果链接来自其他页面，那么请刷新/加载页面。

Answer 1

试试这个

function scrollToAnchor(anchor) { 
      $("html, body").animate({ scrollTop: $(anchor).position().top - 146 }, 'slow'); 
    } 

    $(document).ready(function() { 
     $('.testlink').bind('click', function(e) { 
      e.preventDefault(); 
      var sHref = this.href.split("#"); 
      scrollToAnchor("#"+sHref[1]); 
      return false;   
     }); 

     //now scroll to the anchor when loading page - this was missing 
     scrollToAnchor(document.location.hash); 
    });