Angular Material Dialog Component Scrolling Issue at Startup

I am using Angular Material Dialog component within my app and within this dialog, I am presenting the a user a HTML table of data, that may have a scrollbar.

My issue is though, when I click the button to open the actual dialog, I noticed that the contents are immediately scrolled to the bottom, which is a nuisance, since I need to manually scroll back to the top.

I am using the standard setup as described here:

https://material.angular.io/components/dialog/overview

My dialog call is as follows:

myDialog(a: string, b: string) {
        let dialogRef = this.dialog.open(MyDialogComponent, {
            height: '500px',
            width: '800px',
            data: { a,b }
        });
}

What can I do to avoid this scroll to the bottom issue? I have tried some CSS such as top: 0; position: fixed; but to no avail.

Solved my issue by moving the following HTML code to the top of the page.

<mat-dialog-actions>
    <br>
    <button mat-raised-button type="button" mat-dialog-close (click)="closeDialog()" class="my-btn">
        Close
    </button>
</mat-dialog-actions>