問題タブ [scrollto]

ページを作成しています。私は次のHTMLを持っています:

私が達成したいのは、リンクがクリックされたときです。jQuery を使用して、リンクの href と同じ ID を持つ div を見つけ、ページをその div までスクロールします。誰かが私を正しい方向に向けることができますか? 私が苦労しているのは、IDをhrefに一致させる方法です。

どうもありがとう。

次のようなメニューを取得できるかどうか疑問に思っていました: http://www.pitgroup.nl/over-ons/ (左側の ons メニューの上) が、少ないコードを記述します。

私が持っているものは次のとおりです。

CSSのビット：

これは最も単純な垂直リストであり、指定されたリンクhttp://www.pitgroup.nl/over-ons/のように動作するようにしたいと思います。私はこのようなものを数時間探していましたが、見つけたスクリプトはドロップダウンまたは同様のメニューでしたが、オーバーオンページのように動作しませんでした.

このようなものを作成するには、jqueryのドキュメントで何を読むべきですか。それとも、すでにこのようなものを持っている人もいますか？

編集: 位置をクリックします。リスト全体が上下に移動していることがわかります。これが必要な効果です。

この質問に関して、SOユーザーから素晴らしい助けがありました：

ウィンドウスクロール上のjQueryは、背景画像の位置をアニメーション化します

ここでわかるように、ユーザーがページをスクロールするときに、div の背景画像を段階的にスクロールしたいと考えていました。作業バージョンについては、これを参照してください。

http://jsfiddle.net/nicklansdell/HFxVj/4/

与えられた答えは完全に機能します。ただし、ブラウザーのスクロールバーでページをスクロールできるようにするだけでなく、アンカーがクリックされたときにページを divs ハッシュ位置にスクロールする追加機能も含めたいと考えています。これを実現するために scrollTo プラグインを使用していますが、これは次の CSS を含めるまでは完全に機能していました。

残念ながら、これを含めるとページのscrollToアニメーションは機能しませんが、これを含めると背景画像の位置アニメーションが機能します。どちらか一方のようですが、もちろん両方が必要です:-)ここで回避策を提案できますか? よろしくお願いします。

編集*

問題を少し絞り込みました。問題は本体とは関係なく、html が高さ 100% に設定されていることです。#page div に物理的な高さを与えることです。背景画像のスクロールには 100% の高さが必要ですが、scrollTo が機能するために高さを指定する必要はありません。私の JSFiddle http://jsfiddle.net/nicklansdell/HFxVj/4/更新を見て、#page スタイルをいじって、私の言いたいことを確認してください。

jquery と 3 つのプラグインを使用するサイトを構築しました...

1. jquery.lightbox-0.5
2. ScrollTo
3. jPlayer

jPlayer スクリプトと ScrollTo スクリプトの間で何らかの競合が続いています。jPlayer がなければ、ScrollTo スクリプトは正常に動作します。しかし、jPlayer を追加すると、ScrollTo 関数はページを選択した div にスクロールしますが、選択した div にとどまるのではなく、スクロールをページの上部に戻します。

競合が何であるかを理解するのを手伝ってくれませんか。これらのスクリプトを両方とも同じページで使用できますか?

私が取り組んでいるサイトはこちらです。

http://www.multiplydivide.com/colm/mainorder.html#

私は自分のアプリに jqtouch と iscroll を使用しています。すべてのページをajaxでロードし、ajaxでロードしたページからインデックス（メニューリスト）ページに戻ると、そのページが一番上にスクロールします。どうすればこれを防ぐことができますか? ありがとう。

次のような単純な HTML マークアップが可能かどうかを確認しようとしています。

...そして、新しいページが何らかの単純な JQuery スクリプトでロードされた#location1ときに、ID までスクロールダウンしますか? または、これが scrollTo プラグインで達成できるものである場合、代わりにどうすればよいでしょうか?

問題は、リンクが pageXXX に存在し、スクロール先の ID がすべてのページにあることです。pageXXX、page1、page2、page3 など......理想的には、URL からハッシュ マークと識別子を削除する方法もある場合、それも素晴らしいことですが、現時点ではスムーズに下にスクロールするだけです。新しいページの ID がすべてです。

Ariel Fleslers jQuery LocalScroll pluginを使用しているサイトを構築してい ます。これには、次の 2 つのことを行いたいと考えています。

1) リンクがクリックされたときにアンカーへのスクロールをアニメーション化します
。2) ブラウザの戻るボタンが押されたときに、以前にアクセスしたアンカーまでスクロールします。

スクロールは、コンテンツがあふれているコンテナ内で行われます。

1番は単純明快でした。2番目を達成するために、かなりのグーグルを行いましたが、同様のことをしようとしている人々によるいくつかの投稿に出くわしたにもかかわらず、実際には解決策を見つけられませんでした.

Ben Almans jQuery hashchange イベント プラグインを LocalScroll と一緒に使用 して、目的の結果を達成することになりました。コードは次のようになります。

上記のコードは、コーディングに関してはややハック (しゃれは意図していません) ですが、Firefox、Explorer、Opera で私が望むことを行います。ただし、Chrome と Safari では異なる問題が発生します。

Chrome では、基本的にリンクがクリックされるとスクロールがアニメーション化されますが、ブラウザーの戻るボタンが押されると、トランジションはアニメーション化されずにアンカーにジャンプするだけです。よく調べてみると、たまに戻るボタンをアニメーション化するように見えますが、なぜ時々しかアニメーション化しないのか理解できません.

Safari では、リンクをクリックしても戻るボタンを使用しても、アニメーションせずにアンカーにジャンプします。

hashchange イベント ソリューションを実装する前は、アニメーションは Safari で機能していました。コードは次のようになりました。

Chrome と Safari でこれらの問題を引き起こしている原因について何か考えがある人はいますか? 私が言ったように、私はコーダーではなくデザイナーであり、これは私の能力を本当に伸ばしているので、目前の問題と関係がないかどうかに関係なく、上記のコードで犯した間違いを遠慮なく指摘してください。か否か。

また、これらの素晴らしいプラグインを提供してくれた Ariel と Ben に感謝します。

編集:わかりましたので、別の奇妙なことがあります.ローカルで実行しているテストサーバーにサイトをアップロードすると、Safariでリンククリックのスクロールが機能しますが、オフサーバーで実行するとまったく同じコードが機能しません. いずれにせよ、戻るボタンが押されたときにSafariもChromeもアニメーションをトリガーしないため、問題は残ります。

Facebook アプリ内で scrollTo jQuery プラグインを動作させることができないようです。フォームが入力されると垂直方向に拡大する必要があるため、ウィンドウを移動するために使用しています。私のコードは正常に動作しますが、Facebook 環境では動作しません。

これが機能しない理由と、iframe 内でブラウザーの「ウィンドウ」を移動しようとするときに一般に特別な考慮事項があるかどうかを説明できますか?

scrollTo の使用をバイパスする問題に対する別の解決策がある場合は、それも受け入れます。ありがとう！

スライドショーに非常に似た写真家向けの機能をコーディングしています。この効果を実現するために、jQuery serialScroll プラグイン (scrollTo プラグインに便乗) を使用することにしました。コードは、 serialScroll デモ ページのスライドショーに基づいています。これは、私が探していた機能とほとんど同じです。

コードは正常に動作していますが、もう 1 つの効果を達成したいと考えています。可能であれば、スライドショーのアイテム (私の場合は<li>要素) をデフォルトで半透明にして、現在の (または「アクティブ」または「選択された」) アイテムのみを 100% の不透明度で表示したいと考えています。

CSS で透明度を簡単に制御できますが、serialScroll がアニメーション化した最後のアイテムを追跡するのに苦労しています。クラスを与えたり、他のアクションを実行したりできるように、jQuery を介して現在「アクティブな」アイテムと対話するにはどうすればよいですか?

scrollTo() プラグイン関数がよくわかりません。

私がやろうとしているのは、特定のターゲットに水平に移動することです (あるシーンから別のシーンへのように)。ここに私のコードのいくつかがあります:

まったく機能していません。この問題の正しい方向性をできるだけ早く単純化または説明してくれる人はいますか?

どうもありがとう。(Jquery lib と scrollTo.js は既に含まれています。)

PS私の乱雑なコードを許してください、私はこれにちょっと慣れていません。ありがとうございます。