时间戳

首页 > 解决方案 > 路由器出口导致页面上升，如何解决？

javascript - 路由器出口导致页面上升，如何解决？

问题描述

当用户单击特定行时，将调用 router-outlet 并在该行下方显示一个页面。问题是当用户单击页面显示正常的行时，母版页向上（滚动顶部）..所以用户必须向下滚动才能查看（路由器出口）子页面数据。

如何防止滚动顶部？

<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>

标签： javascripthtmlangularangular2-routingrouter-outlet

解决方案

好吧，找到了一个黑客......

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

推荐阅读