ページコンテンツの位置を固定し、フォームを右からスライドさせながら左に押すボタンがあります。

これは、1つのことを除いて正常に機能しています。ユーザーがページを少し下にスクロールしてボタンをクリックすると、位置が正常に修正されます。ただし、その後このフォームを閉じると、ページは元の位置に戻りません...ユーザーはページの先頭に戻ります。問題をよりよく説明するのに役立つかもしれないjqueryを以下に投稿しました。

ここにjsfiddleの例もあります...

http://jsfiddle.net/CMbBC/

これらは私のコードですが、もちろん機能しません。「if」の質問でどのように適用できますか。

私はいくつかのイライラする JavaScript のタイミングの問題を抱えています。

参考までに、このページはjspファイルであり、このページに添付されているのは別のjsファイルとjQuery CDNファイルです。トラブルシューティングの目的で、不要なコンテンツとコードをすべて削除し、必要なものを個別の jsp ファイルと js ファイルに貼り付けて、この特定の問題をトラブルシューティングしました。

html と js をどこかに表示できれば、それは素晴らしいことです。ですが、とりあえず説明します。このページには 2 つのボタンがあり、1 つは画像をロードするためのもので、もう 1 つは「ズーム」機能を切り替えるためのものです (詳細は後述)。ユーザーがボタンをクリックすると、DOM、具体的には innerHTML を使用して画像が読み込まれます。この画像は、水平スクロール バーと垂直スクロール バーに囲まれています。ユーザーが「ズーム」機能をオンにすると、画像は onclick イベントでマウスのクリック位置を記録します。したがって、これをオンにすると、ユーザーが画像をクリックすると、DOM と innerHTML を使用して、同じ画像のより大きなバージョンが読み込まれます。最後のステップ、最も重要なステップでは、マウスの位置を使用して、スクロールバーがフォーカスされ、クリックされたポイントが中央に配置されます (scrollLeft と scrollTop を使用)。

これはすべてIEで問題なく機能します。ただし、非 IE ブラウザー (つまり、FireFox) では、スクロール調整が innerHTML に追いつくまでに数回クリックする必要があります。つまり、ユーザーが初めて「ズーム」すると、画像はロードされますが、スクロールバーは調整されません。IE と同じように動作するには、さらに 2 回連続してクリックする必要があります。私は innerHTML を研究していましたが、FireFox では IE よりも遅いです。

どうすればこれを修正できますか? JavaScript を使用して FireFox に画像をロードし、すぐに画像のスクロール位置を調整しようとした人はいますか? 繰り返しますが、IEでは最初とその後は毎回機能します。しかし、IE 以外のブラウザには問題があります。

innerHTML、replaceChild、appendChild を使用してみましたが、これまで試したことはありません。

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

更新:この問題がスクロールバー内にあるのか、画像だけなのかを確認したかったのです。そのため、画像を < p > ... < p > に置き換え、ユーザーが開始した onclick イベントを介して **最初の* 画像が読み込まれた直後にスクロールするようにプログラムしました。興味深いことに、それはうまくいきました。次に、テキストを画像に置き換えましたが、再び壊れました。

そのため、DOM (つまり、innerHTML) を使用して画像が読み込まれた後、IE 以外のブラウザーでプログラムによってスクロールしようとすると、失敗します。ただし、プログラムでもう一度スクロールすると、通常どおりに動作します。

Update2:呼び出しの最後にプログラムでイベントをキャンセルし、すぐに関数を再度呼び出すメソッドを採用しようとしましたが、問題は解決しませんでした。

次に、jqueryを使用して画像を読み込んでみましたが、うまくいったようです。私は他の2つのstackoverflow記事からそれを適応させました：Can I get the image and load via ajax into div and img onload does not work well in IE7 (caching issueを回避するため)。

使用したコードは次のとおりです。

重要なのは、onload メソッドを使用したことだと思います。onload メソッド内で jQuery.html() を使用しようとしましたが、機能しませんでした。したがって、innerHTML に関連するタイミングの問題と、画像が DOM に読み込まれる方法とタイミングに間違いなく問題があったことが確認されました。そして、onload メソッドを、DOM のネイティブな appendChild メソッドまたは jQuery の同等の appendChild 実装と組み合わせて使用​​すると、問題が解決されました。

Update3:

以下のmrtshermanの提案について--

これが私のコードです：

画像を配置するための内部 div を作成しました。上記のdivを作成した後、画像のサイズに基づいてサイズを調整しました。js でスクロールを調整してから、innerHTML を介して画像を DOM に添付しましたが、スクロールしませんでした。幅と高さを画像よりも大きい固定サイズに変更すると、スクロールしました。しかし、コンテナを画像よりも大きくすることは、望ましい効果ではありません。ご協力ありがとうございました。

Update4: new Image() の代わりに document.createElement("img") を使用するときにUpdate2 で書いたコードと同等のものは何ですか? onload イベントは、Image オブジェクトと同じ影響を与えていません。ここでは、onload イベントが重要な要素です。

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

内部に要素が含まれるHTMLファイルがありますid="start_section". ページが読み込まれると、この要素までスクロールダウンするようにしたいので、次のスクリプトを追加しました。

これで、ページが初めて読み込まれたときに完璧に機能します。

しかし、方向の変更など、何らかの理由でアクティビティが再作成されるとすぐに、奇妙なことが起こります。ページがリロードされ、特定の要素までスクロールダウンする代わりに、ページの一番下までスクロールします。

キャッシュを無効にしようとしましたが、役に立ちませんでした。

何か案は？

URLのハッシュに基づいてページをスクロールしようとしています。これが私のコードです：

これは何の役にも立ちません。それで、私は何を間違っていますか？もう1つ、次のようなものが必要です。

それは可能ですか?..私のdiv(要素ハッシュが指されている)は、一番上から一番下までスクロールし"#header"ますか?..

更新 1

ハッシュ テキストは ID であるため、 からテキスト「#myid」を返しますwindow.location.hash。もう1つ、ヘッダーのdivにはposition:fixedcssがあり、div（ハッシュがidされている）のコンテナーにはaがあるposition:absoluteため#header、ヘッダーの下にスクロールする必要があるため、ヘッダーの一番下までスクロールする必要がありますまたは高さ。

更新 2

scrollIntoView() プラグインを使用しようとしていますが、エラーが発生しています。

私のコードは次のとおりです。$("#survey_section_8").scrollIntoView();

私はここで何が間違っていますか? ...

私の質問が明確であることを願っています。ありがとうございました！

このコードをhtml要素で使用するためにしばらく前に見つけました

しかし、「t」キーが押されたときにこれをトリガーするにはどうすればよいですか? すべての主要なブラウザの場合?

このフィドルを見てください：

http://jsfiddle.net/contendia/GBTAS/

アイデアは、js を実行できるときにのみタブを作成することで、非 js ユーザーにとって使いやすいページを維持することです。それ以外の場合は、ページを単なる div のスタックとして表示したいと考えています。タブのリストは、タブの数に応じて完全に自動化され、各タブには対応する divs id 属性に従って名前が付けられます。

すべてがうまく機能していますが、現在、クリックイベントを作り直して、タブをより一般的にナビゲートしようとしています。以前は、リスト アイテム タブ (li) の 1 つでクリック イベントを探し、必要なコードを実行してタブを変更しました。

しかし今、この関数をより一般的なものにして、ユーザーが実際のタブをターゲットにすることなく、タブ ID の 1 つに等しいハッシュ値を持つ任意のアンカーをクリックしたときに機能するようにしたいと考えています。アンカー内のハッシュをターゲットにして、タブ ID に対してテストする方法が正確にはわかりません。私が持っている関数は、FF と IE で、タブのクリックとアンカー リンクのクリックの両方で機能します (例: <a href="#tab1">Tab 1</a>)。ただし、タブがビューポートよりも長い場合、タブの上部がウィンドウの上部までスクロールするため、タブ リンクが表示されなくなります。別のタブに移動するには、タブ リンクを手動でスクロールして表示に戻す必要があります。ページを元の位置に戻すために .scrollTo() を試しましたが、うまくいきませんでした。

これは .scrollTo の問題ですか、それともクリック機能についてすべて間違っていますか?

アイデアをいただければ幸いです。おまけ、アニメ化してくれたら最高。

http://jsfiddle.net/contendia/GBTAS/

私は JQuery を実行しており、scrollTop アニメーションを使用してウィンドウを上部近く (約 240 ピクセル、多少可変ですが) に戻したいと考えています。ページ。

私は使用しています：

私が遭遇する問題は、このコードが遅延やタイムアウトなしで実行されると、ウィンドウが非常に小さなスクロール アニメーションを実行し、目的の場所に到達できないことです。任意の遅延 (少なくとも 1 秒から数秒) を追加すると、ウィンドウが目的の場所に配置される場合と配置されない場合がありますが、アニメーションはほとんどアニメーションではありません (2 つの個別の scrollTop 呼び出しのように動作します - すぐに上にジャンプし、少し待ってから、もう一度上にジャンプして正しい場所に移動します)。

コードを個別に (大量の HTML レンダリングの途中でコールバックとしてではなく) 実行すると、アニメーションは正しく動作するようです。

何か案は？前もって感謝します。

ScrollToプラグインが予想される距離の2倍スクロールするという奇妙な問題がありますが、ラジオボタンまたはチェックボックスラベルをクリックした場合のみです。

プラグインを削除して、これに置き換えました...

それでも問題は残った。それで、運が悪かったのでアニメーションストップを追加してみました...

次に、この問題の非常に基本的なjsFiddleを作成しましたが、これはjQueryCoreのバグであると確信しています。jsFiddleが許す限り、すべてのjQueryバージョンでテストされています。これまでのところ、Safari、Firefox、IE8でも同じです。

<label>ラジオボタンまたはチェックボックスの横に要素があり、それが内の属性idとして使用されている場合は、をクリックすると、対応するラジオボタンまたはチェックボックスが選択されます。（これはそのように機能するはずです。）for<label><label>

ここでの問題は、jQueryscrollTop()が計算された位置を2倍にすることですが、ラジオボタンまたはチェックボックスを選択するをクリックした場合のみです。<label>ラジオボタンやチェックボックス自体を含む他のものをクリックすると、適切な距離をスクロールします。

http://jsfiddle.net/sparky672/sZAkJ/

ご覧のとおり、入力要素にリンクされているラベルをクリックすると、ダブルスクロールが発生します。

他のいくつかの観察：

私のページでは、スクロールが2回開始および停止するように見えました。その.stop(true, true)ため、アニメーションにを追加しました。ただし、それはこの問題を止める効果はありません。

これに依存する別の機能があるため、ラベルを使用して入力要素を選択することは避けられません。（例： http： //jsfiddle.net/sparky672/CgMX8/）

を探しています...

1）これについての説明。そうでない場合は、おそらくそれは単なる（新しい？）jQueryコアのバグです。グーグルを検索した後、私はこの癖についての他の言及を見つけることができませんでした。 jQueryバグトラッカーにも何もありません。

2）これの回避策。入力ラベルをクリックして、スクロールを2倍にしないようにすることができます。ラジオボタンやラベルなど、コンテナ内の何かがクリックされたときにスクロール効果を実現したいと思います。セレクターを改良して、ラベルをクリックするとスクロールを半分にカットできると思いますが、他の何かをクリックしても正常に機能します。（アニメーションが2回起動されたように見えるため、これもうまく機能しない可能性があります。）

ページ上のクラス以下に移動すると、div が表示されます。

すなわち。ページが特定のクラスまでスクロールダウンすると、このボックスが表示されるようにします。ページを下にスクロールすると、クラスの上に戻るまでこのボックスが表示されたままになります。

現在、これは上記のとおりではなく、上または下にスクロールすると非表示になります。何らかの方法でコードを変更する必要があります。