无法读取未定义的属性（读取 'scrollTo'）

Question

下面的代码给我运行时错误。当页面从页脚 link 路由时，我只希望浏览器转到顶部。它只是粘在底部，需要滚动。

document.getElementsByClassName('homemenu').scrollTo(0, 0);

header.component.html

<header class="top-head homemenu" *ngIf="showMenu == 'home'">
    <div class="container-fluid">
        <div class="row" [ngClass]="{'justify-content-center': onlyLogo}">
            <div class="col-3 lm-logo"><a href="javascript:void(0)" (click)="showSiteMap = !showSiteMap"><img src="/assets/images/lm-logo.svg"></a></div>
            <div class="col-9" *ngIf="!onlyLogo">
              <div class="d-flex justify-content-end">
                <ul class="menu_wrap d-flex">
                  <ng-container *ngIf="homemenu; else individual_page">
                    <li><a href="javascript:void(0)" class="nav-link" [routerLink]="['/']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a></li>
                    <li><a href="javascript:void(0)" class="nav-link" [routerLink]="['/individual']" routerLinkActive="active">Individuals</a></li>
                    <li><a href="javascript:void(0)" class="nav-link" [routerLink]="['/corporate']" routerLinkActive="active">Corporate</a></li>
                    <li><a href="javascript:void(0)" class="nav-link" [routerLink]="['/hiring']" routerLinkActive="active">Hiring Managers</a></li>
                    <li class="dropdown_menu"><a class="dropdown-toggle nav-link" [routerLink]="['/partners']" routerLinkActive="active" aria-expanded="true" data-toggle="dropdown">Partners</a>
                        <div class="dropdown-menu">
                            <div class="menu_item">
                                <img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico5.png">
                                <a href="javascript:void(0)" [routerLink]="['/partners/content-owners']" routerLinkActive="active" >Content Owner</a>
                            </div>
                            <div class="menu_item">
                                <img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico3.png">
                                <a href="javascript:void(0)" [routerLink]="['/partners/influencers']" routerLinkActive="active" >Influencers</a>
                            </div>
                            <div class="menu_item">
                                <img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico2.png">
                                <a href="javascript:void(0)" [routerLink]="['/partners/localmasters-for-startup']" routerLinkActive="active" >Localmasters for Startup</a>
                            </div>
                            <div class="menu_item">
                                <img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico4.png">
                                <a href="javascript:void(0)" [routerLink]="['/partners/customer-training-solutions']" routerLinkActive="active" >Customer Training Solutions</a>
                            </div>
                            <div class="menu_item">
                                <img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico1.png">
                                <a href="javascript:void(0)" [routerLink]="['/partners/solution-partner-program']" routerLinkActive="active" >Solution Partner Program</a>
                            </div>

                        </div>
                    </li>
                  </ng-container>
                  <ng-template #individual_page>
                    <li><a href="javascript:void(0)" class="nav-link" [routerLink]="['/individual/signup']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a></li>
                    <li><a href="javascript:void(0)" class="nav-link" [routerLink]="['/individual/how_it_works']" routerLinkActive="active">How It Works</a></li>
                    <li><a href="javascript:void(0)" class="nav-link" [routerLink]="['/individual/personal_coaching']" routerLinkActive="active">Be a Mentor</a></li>
                  </ng-template>
                </ul> 
                <button class="btn top-btn" [routerLink]="['/login']" type="button">Sign In</button>
                <!-- (click)="showSiteMap = !showSiteMap" -->
              </div>
            </div>
        </div>
    </div>
  </header>

以上代码按预期运行，但如屏幕截图所示留下错误。

Answer 1

getElementsByClassName returns HTMLCollection.

您必须在 HTMLCollection 中指定要使用 scrollTo 的确切项目。例如：

document.getElementsByClassName('homemenu')[0].scrollTo(0, 0);

或使用更现代的函数来查询 html，例如 querySelector。例如：

document.querySelector('.homemenu').scrollTo(0, 0);

更新问题

如我所见，您已将 class 分配给由 angular 呈现的元素。确保仅在 angular 呈现此标记时调用此函数。

此外，如果代码按预期工作，那么您可以只检查元素的空值，以消除错误：

document.querySelector('.homemenu')?.scrollTo(0, 0);

Answer 2

document.querySelector('.homemenu').scrollTo({top : 0});

无法读取未定义的属性（读取 'scrollTo'）

Cannot read properties of undefined (reading 'scrollTo')

javascript

angular

scrollto

更新问题