問題タブ [anchor-scroll]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
9135 参照

javascript - オフセット付きのスムーズ スクロール アンカー (jquery)

次のコードを使用して、サイトのアンカーにスムーズなスクロールを追加します。私はこれを200pxでオフセットしたいスティッキーヘッダーIDを持っているので

0 投票する
0 に答える
1383 参照

jquery - jquery+adobe muse の問題 - コードの問題を解決する方法: ダイナミック ボタン ナビゲーションの前/次のアンカー?

私は、Adobe Muse を強化するために、アンカーとジャンプ/スクロール コードベースのウィジェットを使用して、パネルからパネルへのキーボード対応ナビゲーションを備えた Web コミックに取り組んでいます。

上矢印と下矢印のキープレスと同様の方法でアクションをトリガーする最上位フレームに配置された動的ボタンのセットを使用して、モバイル ユーザーがナビゲーション オプションを利用できるようにしたいと考えています (現在は機能的ですがバグがあります)。

私の希望は、視聴者が特定の章内の任意のアンカーにリンクし、アンカー ポイントからアンカー ポイントに前後に移動できることです (上のページから最後のアンカー ポイントへ、または下のページから次のアンカー ポイントへ)。そのため、コードが依存しないことが重要です。特にモバイルプラットフォームではアンカーコードへのスクロールジャンプがトリガーされないためです。

例の章へのリンクは次のとおりです。

http://www.attilathe.com/chapter-5.html

JSFiddle は、コンテンツのトップ レベル フレーム構成やウィジェット プラグインの動作を複製しないため、コードを複製する方法がわかりません。

この未回答のスタックオーバーフローの質問も見ました: アンカー名を知らなくても、リンクをページの次のアンカーに移動するにはどうすればよいですか?

  • 関連性があると感じましたが、コードがコンテンツに対して正しく配置され、マスターフレームが考慮されるように、Adobe Muse にコードを効果的に追加する方法を翻訳する助けが必要です。

あなたの洞察を前もってありがとうございました!

リクエストごとに追加を編集 -

以下は、ここの制限に合わせて大量のコードを削除しなければならなかったコードの一部です。誤ってコードを壊してしまった可能性があるため、リンクのソース コードを参照してください。例の章では、ボタンが機能しなかったため配置されていませんが、意図したボタンが配置されるマスター フレーム レイヤー内の他の機能を既に完了しているボタンが含まれています。

0 投票する
1 に答える
315 参照

angularjs - Angular $anchorScroll ID が URL に残り、更新後に機能しない

公式ドキュメントの例に従って$anchorScroll、angular に問題があります。をクリックした後、場所のに追加されます - 、最初のロードでは正常に動作しますが、ページがの最後に留まり、スクロールが機能しません。これを修正する方法についてのアイデアはありますか? 私のコード: HTML:gotoBottomgoToBottm$anchorScrollurlIDmysite.com/tag/##IDrefershingIDurl

そしてID:

私のgotoBottom controller

0 投票する
1 に答える
467 参照

jquery - Wordpress/jQuery: スクロール時に div がビューポートにあるときに一致するアンカーを強調表示する

私は現在、次の基準でWordpress Webサイトのメニューを実装しようとしています:

  1. ユーザーがページを下にスクロールし、アンカーされた div (メニューにリンクされている) に到達すると、メニュー内のリンクはクラス "active" を取得する必要があります。
  2. ユーザーが anchor をクリックすると、ページはアンカーされた div までスクロールし、リンクは「アクティブ」クラスを受け取る必要があります。

そのページの HTML は次のとおりです。

次のコードはほとんど機能しますが、次のエラーがスローされます。

Uncaught Error: Syntax error, unrecognized expression: http://domain.com/not-the-current-page

ロジックは次のとおりです。

  1. スクロールをリッスンし、それに応じて「アクティブ」クラスを追加します。
  2. リンクがクリックされたら、停止し (1.)、アンカーまでスクロールし、クラス「アクティブ」を追加してから再開します (1.)。

これは、jQuery を使用した最初の作業です。これを正しく機能させる方法について、誰かが私を正しい方向に向けてくれることを願っています。あなたの助けは大歓迎です!

0 投票する
1 に答える
479 参照

html - アンカスクロールはng-repeatを使用してコントローラで実行されませんか?

ng-repeat の実行のタイミングに関するいくつかの奇妙な AngularJS1 の動作を特定したと思います。したがって、コントローラーの実行のタイミングと競合します。

私のコントローラーは自動的に html アンカー ID までスクロールします: $anchorScroll('html_id');

これは、静的 html ( static html plunker )で問題なく動作します。

ただし、ng-repeat ( ng-repeat plunker )によって生成された div でコントローラーによって呼び出された場合、anchorScroll は機能しないようです。

注:: ng-repeat の anchorScroll はボタンで正常に動作しますが、読み込み時に自動的にスクロールしたい...

(ng-init= を使用してスクロール関数を呼び出すことも試みましたが、同じタイミングの問題です。そのため、アンカーを見つけることができません... ng-repeat の後にコード化されていても)

アイデア/回避策はありますか?

(バインドする ng-repeat イベントはないようです...)