Angular2 - 如何將對話框滾動到頂部

Question

需要將對話框滾動到頂部，以便表單提交後警報進入視圖。 試過這個，但似乎沒有在對話框上工作。

window.scrollTo(0,0); 

Answer 1

document.getElementById('formsubmit').onclick=function(){ 
 
    document.getElementById('form').scrollTop = 0; 
 
    return false; 
 
}

input { 
 
    display:block; 
 
} 
 

 
.form { 
 
    height:100px; 
 
    overflow-y:auto; 
 
}

<div> 
 
    <h1>form</h1> 
 
    <div class="form" id="form"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    
 
    <input type="submit" id="formsubmit"> 
 
    </div> 
 
</div>

Answer 2

儘管這個問題已經被標記爲答案，這不是滾動到頂部的角度-Y方式。這樣做的更好的方式是通過做：

@ViewChild('scrollContainer') private myScrollContainer: ElementRef; 
 
    
 
constructor(private _renderer: Renderer2) {} 
 
onFormSubmit() { 
 
    this._renderer.setProperty(this.scrollContainer.nativeElement, 'scrollTop', this.scrollContainer.nativeElement.scrollHeight); 
 
}

input { 
 
    display:block; 
 
} 
 

 
.form { 
 
    height:100px; 
 
    overflow:auto; 
 
}

<div> 
 
    <h1>form</h1> 
 
    <div #scrollContainer class="form"> 
 
     <input type="text"> 
 
     <input type="text"> 
 
     <input type="text"> 
 
     <input type="text"> 
 
     <input type="text"> 
 
     <input type="text"> 
 
     <input type="text"> 
 
     <input type="submit" (click)="onFormSubmit()"> 
 
    </div> 
 
</div>

一個好的經驗法則是，如果你看到```document``那麼你沒有做什麼角度來說，但香草的方式。

一個很大的錯誤，人們普遍提出的是，他們使用的ElementRef到setValues方法，屬性，CSS。根據角度文檔，ElementRef應該被用作最後的手段。你可以閱讀更多有關在這裏：https://angular.io/api/core/ElementRef