アンカーにスクロールして機能しない

Question

次の構文を使用してアンカーリンクにスクロールしようとしています。クリックされたブラウザのアドレスバーが#testフラグメントを示したが、自動スクロールが発生していない場合は

<a [routerLink]="['./']" fragment="test">Testing</a> 

はアンカーノードは、この

<div id="test"> 

のように見えます。なぜそれがスクロールしないのか？

Answer 1

スクロールがまだ角度2で実装されていないとします。同様の問題（同じページのアンカーにスクロールする）に対する私の解決策は、ng2-page-scrollを使用することでした。

Answer 2

@vsavkinの回避策、および活かし断片が観察として設けられている（ "角度/コア@" を使用して： "^ 2.3.1"）：に基づいて

class MyAppComponent implements OnInit{ 

    constructor(private route: ActivatedRoute) { } 

    ngOnInit() { 
    this.route.fragment.subscribe(f => { 
     const element = document.querySelector("#" + f) 
     if (element) element.scrollIntoView(element) 
    }) 
    } 
} 

Answer 3

が、私はこれを使用して言っています

scroll(container, target) { 
    let scrollTo = target.getBoundingClientRect().top; 

    $(container).animate({ 
     scrollTop: `+=${scrollTo}` 
    }, 900); 
} 

は、HTMLで

<div #container> <!-- Scrolling container --> 
    <button (click)="scroll(container, intro)">Go To Intro</button> 
    <!-- other content --> 
    <div #intro></div> 
</div> 

Answer 4

ような何かを行います私は

ng2-page-scroll

は、あなたのHTMLコンポーネントで、あなたのapp.module.tsに

import {Ng2PageScrollModule} from 'ng2-page-scroll'; 

@NgModule({ 
    imports: [ 
     /* Other imports here */ 
     Ng2PageScrollModule 
     ] 
}) 
export class AppModule { 
} 

テストを

npm install ng2-page-scroll --save 

インポートをインストールし、ユーザーNG2​​-ページスクロールに提案することができ

<a pageScroll href="#test">Testing</a> 
<div id="test">