0

Bootstrap で構築された 1 ページの Web サイトがあります。すべてのメニュー項目は、本文の div を指す内部リンクであり、ページのスクロールをアニメーション化するためのスムーズ スクロール JavaScript が少しあります。

Chrome と IE ではすべて問題なく動作しますが、Firefox ではリンクがまったく機能しません。Smoothscroll .js ファイルを参照する行をコメントアウトすると、リンクが正常に機能するため、Javascript の問題のようです。

私が使用しているjavascriptはこれです：

$('a[href*=#]').each(function() {
if($(this).attr('href').indexOf("#") == 0) {
  $(this).click(function(e) {
    e.preventDefault();
    var targetOffset = $($(this).attr('href')).offset().top;
    $('body').animate({scrollTop: targetOffset - 70}, 700);
  });
}
});

私は何が欠けていますか/間違っていますか?

問題の実際のサイトはこちらでご覧いただけます。

4

1 に答える 1

1

scrollTop アニメーションを

$('body,html').animate({scrollTop: targetOffset - 70}, 700);

これでFFで修正され、Chromeでも引き続き機能するはずです。

アップデート

理由を尋ねている場合に備えて: よくわからないので、これが起こっていると思います: FF と Chrome で and を比較するHTMLとBODY、FF ではHTML-Element のサイズはレンダリングされたものと同じくらい大きくなります。資料。Chrome では、HTML-Element のサイズは Browser-Window のサイズであり、BODY-Element はレンダリングされたページと同じ大きさです。それらは異なる方法でレンダリングされます。FF はHTMLそのウィンドウ内をスクロールし、Chrome はBODY内をスクロールしHTMLます。

他のスレッド/コメントで指摘されているように (ここでは例として)、このソリューションは 2 つの呼び出しを行います。したがって、ifスクロールする前に を配置するか、 を使用できますdocument。後者は、スクロールしたい場所にスクロールしましたが、アニメーション化しなかったため、うまくいきませんでした。私ifは個人的には読みやすいと思っています. したがって、より良い解決策は、ブラウザーを検出し、またはのいずれ$('html')かを使用すること$('body')です。

于 2014-01-28T03:16:21.277 に答える