2

あるページ (ページ 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>

これはアンカーにリンクし、それをオフセットして、アンカーがヘッダーの下にならないようにします。

ページ 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 に答える