项目现象:在静态页面中往往需要点击某个按钮跳转到当前页面的某个地方
实现:
方法一:(不推荐)
页面:
<button (click)="goDistance('distannce2')">跳转到2</button>
<div id="distannce1" style="width:500px;height:500px;background:red"></div>
<div id="distannce2" style="width:500px;height:500px;background:yellow"></div>
控制:
goDistance(location: string): void {
window.location.hash = '';
window.location.hash = location;
}
方法二:
页面:
<button (click)="goDistance()">跳转到2</button>
<div #distannce1 style="width:500px;height:500px;background:red"></div>
<div #distannce2 style="width:500px;height:500px;background:yellow"></div>
控制:
<!--引入-->
import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('distannce1') distannce1: ElementRef;
@ViewChild('distannce2') distannce2: ElementRef;
goDistance(): void {
this.distannce2.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
}
方法三:如果在项目中引入了jquery那就可以直接用了
页面:
<button (click)="goDistance()">跳转到2</button>
<div #distannce1 style="width:500px;height:500px;background:red"></div>
<div #distannce2 style="width:500px;height:500px;background:yellow"></div>
控制:
import * as $ from 'jquery';
goDistance(){
let location= $('#' + this.routerinfo.snapshot.queryParams['distance']).offset().top;
$('html, body').animate({ scrollTop: location }, 500);
}
方法四:(引入框架自带的,举个例子【Ant Design】)
<nz-anchor>
<nz-link nzHref="#distannce1" nzTitle="跳转到1"></nz-link>
<nz-link nzHref="#distannce2" nzTitle="跳转到2"></nz-link>
</nz-anchor>
<div id="distannce1" style="width:500px;height:500px;background:red"></div>
<div id="distannce2" style="width:500px;height:500px;background:yellow"></div>