1

これが私の問題です。これは、stickymenu (#main-menu) を備えた 1 ページの Web サイトです。#main-menu はその位置に固定されています。最初の画像は、メニューの「About」リンクをクリックしたときにページがどのように表示されるかを示しています。ページは #about でスムーズにスクロールします。

画像 1

しかし、ここの画像2では、私のサイトがレンダリングしているものです.「About」リンクをクリックすると、About Usのタイトルが一番上までスクロールし、#main-menuに隠れます.

画像 2

これが私のJSコードです：

$('a').click(function(e) {
        var target = $(this).attr('href');
        e.preventDefault();

        $('html,body').animate({
            scrollTop: $(target).offset().top
        }, 800, 'easeInOutCirc');
    });

#main-menu の一番下まで停止させるにはどうすればよいですか? 100万前もってありがとう！

4

1 に答える 1

3

offsetTop からヘッダーの高さを減算します。

$('html').animate({ // $(document.documentElement) works too
  scrollTop: Math.max($(target).offset().top - $('#your-header').outerHeight(), 0)
}, 800, 'easeInOutCirc');

Math.max( ... , 0) を追加して、リンク先が一番上にある場合に負のオフセットまでスクロールしないようにします。

于 2011-10-08T15:06:36.497 に答える