現在のページの特定の要素にスクロールする4

Question

ボタン（ページの一番下にある）をクリックすると、上部にある特定の要素（私の場合は#navbar）に移動したい現在のページが、私はそれを行う方法がわかりません。私は役に立たないと次のコードを試してみました。角度成分で

<nav class="navbar navbar-light bg-faded" id="navbar"> 
    <a class="navbar-brand" href="#"> 
     {{appTitle}} 
    </a> 
    <!-- rest of the nav link --> 
</nav> 
<!-- rest of the page content --> 

<!-- bottom of the page --> 
<button class="btn btn-outline-secondary" (click)="gotoTop()">Top</button> 

：

import { Router } from '@angular/router'; 
/* rest of the import statements */ 
export class MyComponent { 
    /* rest of the component code */ 
    gotoTop(){ 
     this.router.navigate([], { fragment: 'navbar' }); 
    } 
} 

誰かが解決策で私を助け、私のコードが働いていなかった理由を説明した場合、私は本当にいただければ幸いです。

要素（navbar）は他のコンポーネントにあることに注意してください。

Answer 1

あなたはjavascriptでこれを行うことができます。

gotoTop() { 
    let el = document.getElementById('navbar'); 
    el.scrollTop = el.scrollHeight; 
} 

メソッドが呼び出されたときには、ビューにid="navbar"でDOM要素をもたらすでしょう。 Element.scrollIntoViewを使用するオプションもあります。これは滑らかなアニメーションを提供し、見栄えは良いですが、古いブラウザではサポートされていません。

要素が異なるコンポーネントにある場合は、this questionのようにいくつかの異なる方法で参照できます。

あなたのケースのための最も簡単な方法は、おそらく次のようになります。

import { ElementRef } from '@angular/core'; // at the top of component.ts 

constructor(myElement: ElementRef) { ... } // in your export class MyComponent block 

し、最終的に

gotoTop() { 
    let el = this.myElement.nativeElement.querySelector('nav'); 
    el.scrollIntoView(); 
} 

Working plunker.

Answer 2

私はあなたの方法があるため、空のルータで動作しませんでしたと思います。

this.router.navigate(['/home'], { fragment: 'top' }); 

'home'がルートとして宣言されていて、その上にid = "top"要素があると、機能します。私は（少なくとも）あなたは、それは「純粋な角度道」になりたいが、これは動作するはずです知っている

：

gotoTop(){ 
    location.hash = "#navbar"; 
} 

Answer 3

私が知っている、あなたは、ページ内の特定の要素にスクロールします。要素がページの上部にある場合は、次のように使用できます。

window.scrollTo(0, 0);