6

次のコードを使用して、ユーザーがhref「#」で始まるリンクをクリックしたときの動きを滑らかにしています

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

scrollTop 値に約 40px を追加する必要があるため、停止ポイントがコンテンツをカバーしません。コードをこれに変更しましたが、それを実行していないようです (コードの末尾に向かって +40 があることに注意してください)。

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top + 40
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
4

2 に答える 2

21

私は遅い答えを知っていますが、解決策を探している人はこれを試すことができます.

.top + (-40) を追加することでうまくいきます

$('html, body').stop().animate({
    'scrollTop': $target.offset().top + (-40)
}, 900, 'swing', function () {
    window.location.hash = target;
});
于 2014-07-20T07:50:38.270 に答える
2

アニメーションが完了すると、ブラウザーは、渡されている要素に移動するというデフォルトの反応を行っているため+40、実際にしたいオフセットは機能しません。-40idwindow.location.hash

その行を削除するか、スクロール先の要素に次の css を追加できます。

padding-top: 40px;
margin-top: -40px;

フィドルを見る

于 2013-05-13T18:35:12.693 に答える