2

次のスクリプトを実行したい

$('html, body').animate({
    scrollTop: $('#deckblatt').offset().top
}, 1)

Deckblatt は、私のページの最初の content-div です。

Chrome はこれを行いませんが、FF は行います。

紛らわしい部分は、Chrome と FF の両方で完全に正常に動作する 2 番目のページで同じ excent メソッドを実行していることです。

以前にスクロールダウンしたときにブラウザーがページのセクションに自動的にジャンプするのを防ぎ、達成したいことを行うためのより良い方法がありますか?

前もって感謝します。

編集：

これは、正しく実行されていない最初のプロジェクトの完全なコードです。

スプロッテンウェルズ

そして、これが2番目のコードです。これは正常に動作します

#2

4

1 に答える 1

0

Chrome のバグではありません。元のコードには奇妙なものが含まれています。

  • scroll-top下にスクロールすると表示され、ユーザーがクリックして一番上にスクロールできるクラスを持つ要素はありません。
  • top他の要素のようにまたはbottomidを持つ要素はありません。
  • 他の作業例にある JSFiddle-code から必要な CSS コードをいくつか省略しました。

  • しかし、最も重要なエラーの 1 つは、target変数が JavaScript コードで定義されておらず、「#top」文字列でその等価性を検査していることです。これにより、ReferenceError 例外が発生します。クリック イベントのターゲット要素の ID が文字列と等しいかどうかを調べたいと思います"#top"。このためには、たとえばeventイベント ハンドラで引数を宣言し、 を使用する必要がありますevent.target.id。したがって、これの代わりに：

    $('.scroll').click(function(){

    $('html, body').animate({
        scrollTop: $(this.id).offset().top
    }, 500);

    setTimeout("$('.scroll-top').fadeIn();",510 );

    if (target == "#top"){$('.scroll-top').hide() ;}

});

    次のコードを使用する必要があります。

    $('.scroll').click(function(event) { // declaring event variable as an argument
    $('html, body').animate({
        scrollTop: $(this.id).offset().top
    }, 500);

    // inspecting the id of the click event's target element
    if (event.target.id == "#top") {
      $('.scroll-top').hide();
    } 
    else {
      setTimeout(function () {
        $('.scroll-top').fadeIn();
      }, 510);
    }

});

元のコードを変更し、不要なもののコメントを外しましたが、まだ多くのものが残っています:

http://jsfiddle.net/uKcQG/3/

まだ少しバグがありますが、スクロールは正しく機能しているようです。

しかし、コメントで提案したように、このタスクには Ariel Flesler のjQuery scrollTo プラグインを使用する必要があります: http://demos.flesler.com/jquery/scrollTo/

于 2013-01-06T16:51:12.643 に答える