web-dev-qa-db-ja.com

プラグインなしでangular 4のページアンカーにスムーズにスクロールする方法

私が達成したいのは、クリックして下にスムーズにスクロールすることです/指定されたdivエリアはハッシュタグで定義します.

以下は、JQuery向けに書かれたw3schoolサンプルのライブ例です。 https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

私がすることは、この答えから覗く： Angular2 Routing with Hashtag to page anchor

しかし、私は本当に答えを理解していません、答えは次のように見えます：

この部分はHTML部分です：

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

そして、この下にあるrouter.navigateはどこにコードを置くべきですか？ component.tsが正しいですか？しかし、この機能にアクセスするにはどうすればよいですか？実装（クリック）する必要がありますか？

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

そして、この下に、私はそれを取得し、それを私のcomponent.tsに書くべきです：

** Add Below code to your component to scroll**

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

「somepath」とはどういう意味ですか？ routes.tsにルートを追加する必要がありますか？通常、私はこのような新しいパスをここに追加します：

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'product', redirectTo: '/product' },
  ...homeRoutes,
  ...productRoutes
];

誰でもHTML、ルート、およびコンポーネントの完全なサンプルコードを提供できますか？

angulartypescriptscrollroutes
21
Ke Vin

私が読んだものと私が検索したものから、それは私が考えるJQueryのように単純ではない単なるスクロールのコードの地獄になりますので、完璧に動作するこのプラグインを使用することにしました： https：// www.npmjs.com/package/@nicky-lenaers/ngx-scroll-to

気軽に使用してください

18
Ke Vin

私は同様のソリューションを探していましたが、 ngx-scroll-to パッケージを使用しようとしましたが、angular（angular 6+）の最新バージョンでは動作しないことがわかりました。他のオプションを調べて、ブラウザの nativescrollIntoViewを使用するソリューションを見つけました。これがこれまでのところ最良のソリューションであるようです

HTMLコード：

<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>

Tsコード：

scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }
47
Joel Joseph

コンポーネントでこれを行うことができます。

const element = document.querySelector("#destination")
if (element) element.scrollIntoView({ behavior: 'smooth', block: 'start' })

参照： https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

9
Haroon Yousuf

CSSのみのソリューション

html {
  scroll-behavior: smooth;
}

ナビゲーションまたはページのリロード後でも機能します。

IE、Edge、またはSafariでは機能しないことに注意してください。

4
Ilker Cat

角かっこを削除してみてください。

class="startScroll" scrollTo="'#firstDiv'" scrollBoxID="'#scrollBox'"
1
Gmak

ngx-page-scroll を使用しました。次のように簡単にできます：

<a class="nav-link nav-item-text" pageScroll href="#categories">Categorias</a>

....

<section id="categories">

詳細については、パッケージページにアクセスしてください。 https://www.npmjs.com/package/ngx-page-scroll

また、スクロールプロセスを構成するメカニズム、またはコンポーネントのコントローラーからスクロールを制御するサービスを介してイベントを実装するカスタムメカニズムも提供します。

0
Thiago Araújo