問題タブ [anchor-scroll]

私はシングルページアプリケーションモデルを使用することにしました-別の でcontrollers.js、 Webサイトservices.jsをapp.js作成するために、ビューの変更時にビューを更新するのではなく、実際にビューを互いに積み重ねます。

基本的な例に知識を入れたかったので、基本的に ui-view ディレクティブを使用しようとしていました。

私が遭遇している問題は次のとおりです。header.htmlアンカーリンクが別のファイル<a></a>の を指している があります。スクロールを機能させることができませんでしたが、stackoverflow の誰かがとの回避策を示していました。div.html$location.hash('');$anchorScroll

私の場合、これには 2 つの欠点があります。

1. アンカーからdiv. 私は周りを読んで、これは$anchorScroll. 私は疑問に思っていました-ScrollMagicスクロール機能を提供するような方法で実装できます。
2. メソッドを使用して$anchorScroll、ページの上部にスクロールして戻って同じアンカーをクリックすると、機能しません。

これは SO に関する私の最初の投稿なので、順序立ててコードを提示する方法についてのヘルプは大歓迎です。

160px 上にスクロールした後、画面の上部に固定されるナビゲーション バーがあります。また、アンカー リンクにはスムーズ スクロールを使用します。これは、ナビゲーション バーが既に画面の上部に固定されている場合にうまく機能しますが、160 ピクセル上にスクロールする前にナビゲーション バーが固定されていない状態にある場合、アンカー スクロールは取り込まれません。私が追加した40pxのバッファを考慮してください。

ナビゲーションバーが固定されているかどうかに関係なく、スムーズスクロールで正確に-40pxまでスクロールしたい。

私が使用している2つのコードは次のとおりです。

1) スムーズスクロール

2) 固定ナビゲーション バー

何か案は？

前もって感謝します。

ユーザーをホームページにリダイレクトするために使用される state.home() という名前の状態があり、これが私の状態です。

いくつかの作業を行った後の別のページで、コントローラーでユーザーをホームページの特定の Div にリダイレクトする必要があるため、コントローラーでリダイレクト用にこの行を追加しましたが、正しい方法ではないようです:

同じ状態で機能するかどうか、または新しい状態を作成する必要があるかどうかを知りたいです。

コンテキスト: 左メニュー (ナビゲーター) と右パネル (コンテンツ) の div があります。ナビゲーターのすべてのアイテムは、右側のパネルのセクションの ID にリンクされています。

問題: ナビゲーション パネルからメニュー項目をクリックすると、右側のパネルを対応するセクションにスクロールしようとしています。

私はanchorScroll()とlocator.hash()関数でそれをやっています。動作しますが、ページ全体 (ナビゲーションとコンテンツ) をスクロールします。

2 つのコントローラーを作成しました。1 つは親 (ナビゲーターを含む) 用で、もう 1 つはコンテナー (スクロールしたいもの) 用です。メニューからアイテムをクリックすると、スコープ内の変数が変更されます。

次に、子スコープから、その変数を見て、スクロールを実行しています

html:

js:

スコープの親:

スコープの子:

問題は、ページ全体がスクロールされることです。

何か案が ？

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

これに関するヘルプは大歓迎です。クライアントのワードプレスでこれらのアンカー リンクを修正しようとしていますが、突然アンカー リンクが機能しなくなりました。何も変更されておらず、追加のプラグインも追加されていません。何らかの理由で応答しなくなっただけです。wordpress 4.4.2 で、ビルダー プラグインも使用しています。ライブ サイトの URL は次のとおりです: http://www.franchiseinnovationgroup.com

奇妙な点は、#top と #footer のアンカーは機能しますが、#about、#portfolio、#testimonials、#contact のアンカーは機能しないことです。

どんな助けでも大歓迎です！

ありがとう、

ブラッド

に問題がanchorScrollあります。ID に timeStamp の日付があるため、ng-repeat でリストを実行します。ID を特定すると、スクロールで移動したいのですが、何らかの理由でスクロールが私の残りの視力は失われます。

注：私はまだこれを解決していません。ngRouteこの投稿は、私がAngularの新しいバージョンを使用しているため、私の問題の解決策を説明しているようですが、彼女の解決策を機能させることができませんでした: https://stackoverflow.com/a/35028895/6647188

私の単一ページアプリ: https://kylevassella.github.io/
ナビゲーションボタンを別のビューのハッシュリンクにリンクしようとしています。ここで受け入れられた回答を使用して助けを求めてきました: AngularJS でアンカー ハッシュ リンクを処理する方法

$anchorScrollしかし、自分のサイトに( ) を実装するのに問題があります。

私が話していることを見るには：

1. My Plunker: https://plnkr.co/edit/fgTG7j?p=info ナビゲーション メニュー (「ホーム ポートフォリオ コンタクト」) が上部に表示されるように、プレビュー ウィンドウを十分に広くします。
   

2. [Projects] まで下にスクロールし、[Project 1] をクリックします。これにより、新しいビューが開き、 ng-show別のナビゲーション バーが有効になります (以前のものと同じように見えます。これらのナビゲーション アンカーについては、以下<section ng-show="showPortfolioHeader">を参照し てください)。index.html
   

3. ここから、'Portfolio' & 'Contact' をビュー内の #portfolio & #contact ハッシュ リンク ID にリンクさせviews/home.htmlます。views/home.htmlしかし、ページ上のそれぞれのスクロール ポイントではなく、正しいルート ( ) に移動するだけです。
   注: Plunker では、これらは正しいルートにリンクすることさえできず、404 につながります。それは問題ではありません。私のローカル マシンでは、この部分は正常に動作します。私の問題は、views/home.htmlビューに到達すると、ブラウザーがハッシュ リンクまでスクロールしないことです。