2

我正在尝试从另一页（第 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;           
    });
});

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

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

4

1 回答 1

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);
    });
于 2013-07-18T20:49:53.187 回答