Angular 4でクリックして要素にスクロールする

ボタンを押したときにターゲットまでスクロールできるようにしたい。このようなことを考えていました。

<button (click)="scroll(#target)">Button</button>

そして私の中でcomponent.tsのような方法。

scroll(element) {
    window.scrollTo(element.yPosition)
}

上記のコードは有効ではありませんが、私が何を考えていたかを示すためだけのものです。Angularの経験がなく、Angular 4の学習を始めたばかりです。私はこのようなものを探していましたが、すべての例はAngularJにあり、Angular 4とはかなり異なります

あなたはこのようにそれを行うことができます：

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

そしてあなたのコンポーネントで：

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

編集：要素が定義されていないため、これが機能しないことを示すコメントが表示されます。Angular 7でStackBlitzの例を作成しましたが、まだ動作します。それが機能しない例を誰かが提供できますか？

setTimeoutor requestAnimationFrameまたはjQuery を使用せずにこれを実現する純粋なJavaScriptの方法があります。

つまり、スクロール先のscrollViewで要素を見つけて、を使用しますscrollIntoView。

el.scrollIntoView({behavior:"smooth"});

こちらがプランカーです。

Angular 4を使用した方法は次のとおりです。

テンプレート

<div class="col-xs-12 col-md-3">
  <h2>Categories</h2>
  <div class="cat-list-body">
    <div class="cat-item" *ngFor="let cat of web.menu | async">
      <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
    </div>
  </div>
</div>

この関数をコンポーネントに追加します。

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

Angular 7では完璧に機能します

HTML

<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>

コンポーネント内

  scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
  }

ジョンには正しい答えがあり、これは私の角度5と6のプロジェクトで機能します。

クリックしてナビゲーションバーからフッターにスムーズにスクロールしたい場合：

<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>

scrollTo(className: string):void {
   const elementList = document.querySelectorAll('.' + className);
   const element = elementList[0] as HTMLElement;
   element.scrollIntoView({ behavior: 'smooth' });
}

私はフッターからヘッダーにスクロールバックしたかったので、この関数を配置するサービスを作成し、それをnavbarコンポーネントとフッターコンポーネントに挿入し、必要に応じて「ヘッダー」または「フッター」に渡しました。使用するクラス名をコンポーネント宣言に実際に与えることを忘れないでください。

<app-footer class="footer"></app-footer>

Angularでそれを行う別の方法：

マークアップ：

<textarea #inputMessage></textarea>

ViewChild()プロパティを追加：

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

scrollIntoView()関数を使用して、コンポーネント内の任意の場所にスクロールします。

this.inputMessageRef.nativeElement.scrollIntoView();

以下のコードブロックを使用して、ビューの任意の要素refにスクロールできます。ターゲット（elementref id）は任意の有効なhtmlタグ上にある可能性があることに注意してください。

ビュー上（htmlファイル）

<div id="target"> </div>
<button (click)="scroll()">Button</button>
 

  

上の.tsファイル、

scroll() {
   document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}

これは、次のように角度付きDOM要素への参照を使用することで実現できます。

これがstackblitzの例です

コンポーネントテンプレート：

<div class="other-content">
      Other content
      <button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
        Click to scroll
      </button>
    </div>
    <div id="content" #element>
      Some text to scroll
</div>

角度では、使用することができますViewChildとElementRef：あなたのHTML要素REFを与えます

<div #myDiv > 

コンポーネント内：

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

this.myDivRef.nativeElementあなたの要素に到達するために使用できます

jQueryを使用して要素（などdocument.getElementById(...)）を検索し、.focus()呼び出しを使用するだけで、あなたが求めているようなことを行いました。

これを行うには、jqueryを使用します。

tsコード：

    scrollTOElement = (element, offsetParam?, speedParam?) => {
    const toElement = $(element);
    const focusElement = $(element);
    const offset = offsetParam * 1 || 200;
    const speed = speedParam * 1 || 500;
    $('html, body').animate({
      scrollTop: toElement.offset().top + offset
    }, speed);
    if (focusElement) {
      $(focusElement).focus();
    }
  }

htmlコード：

<button (click)="scrollTOElement('#elementTo',500,3000)">Scroll</button>

スクロールする要素にこれを適用します。

<div id="elementTo">some content</div>

以下は、stackblitzのサンプルです。