3

クリックでスクロールバーを特定のdivに配置したい。私はこのコードを使用します：

<a href="#sponsor">Go to Sponsor</a>
...
<div id="sponsor">Sponsor</div>

問題は、ヘッダーが固定されており (高さ 50px)、div#sponsor 自体と重なっているということです。

ここを参照してくださいhttp://jsfiddle.net/xqZ9y/

の解き方？

ありがとうございました。

4

2 に答える 2

2

問題は、ドキュメントのスクロールトップをターゲットのオフセットトップに設定することにより、標準のアンカーがターゲットに移動することです。あなたの場合、これはアイテムがヘッダーの後ろに配置されていることを意味します。これを回避する方法の 1 つは、アンカー クリック イベントをオーバーライドして、アイテムの位置が変更されたときにヘッダーの高さを補正することです。

これを行うjQueryは次のとおりです...

$(function(){
    $("a[href^='#']").on("click.scrollFix", function(e) {
        // cancel the click of the a href from taking you to the 
        // anchor by normal means
        e.preventDefault();        

        // instead find the element and scroll to the elements position - the height of the     header
        var targetSelector = $(this).attr("href"),
            targetTop = $(targetSelector).offset().top,
            headerHeight = $("#header").outerHeight(true);

        $(document).scrollTop(targetTop - headerHeight);
    });
});

そして、これは固定ヘッダーといくつかのジャンクコンテンツを使用した例の実用的なフィドルです:)

http://jsfiddle.net/QjheK/

于 2013-10-04T10:07:23.583 に答える