Question

我正在尝试从另一个页面（页面1）链接到一个页面（页面1）上的锚点（页面2）。两个页面都有一个固定的标题。因此，我在两个页面上都使用了以下脚本：

$(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>

这会链接到锚点，然后将其偏移，以便锚点不在标题下。

当我从Page 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;           
    });
});

......但那没用。也许我写错了我想做的事情。如果是这样，我将不胜感激。

BTW，如上所述，当从同一页面上的链接点击锚点时，页面不会刷新 - 它只是转到锚点。如果可能的话，我希望留下来（意思是不刷新）。如果链接来自另一个页面，是的，请刷新/加载页面。

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);
    });

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

1 个答案: