router outlet cause the page to go up, how to solve this?

Question

When a user clicks on a specific row the router-outlet is called and a page is displayed below that row. The problem is when the user clicks on the row the page is displayed fine but, the master page goes up (scroll top)..so the user has to scroll down to see the (router-outlet) child page data.

How can I prevent the scroll top?

<table class="table table-bordered table-hover">
    <div *ngFor="let values of domResponseData;let i = index" (window:scroll)="onScroll($event)">
        <tr style="text-align: center" (click)="showDetails(values,'showdet',i)" [class.selected]="checkIndex==i">
            <td style="text-align: left" width="30%">
                <div>{{values.title}} {{values.firstName}} {{values.middleName}} {{values.lastName}}</div>
                ( {{values.registeredEmail}} )</td>
            <td width="40%">
                <div>Transaction-ID - {{values.transactionID}}</div>{{values.date | date:'full'}}</td>
            <td width="500px">
                <div>{{values.bookingstatus}}</div>Total Price :- ₹ {{values.totalPrice}}</td>
        </tr>
        <tr *ngIf="checkIndex==i" style="background-color: #e4e5e6; " id="jump">
            <td colspan="3">
                <router-outlet></router-outlet>
            </td>
        </tr>
    </div>
    <tr style="text-align: center" (click)="showMore()">Show More</tr>
</table>

Answer 1

Well kind of found a hack...

setTimeout(function(){var y=window.scrollY+50;
    window.scrollTo(0, y);
},150);