我正在尝试对同一页面上的锚元素进行简单的滚动。基本上,用户点击“尝试”按钮,它就会滚动到页面下方 ID 为“登录”的区域。现在,它正在与一个基本的id="login"
& <a href="#login"></a>
但它正在跳转到该部分。理想情况下,我希望它滚动到那里。如果我使用 Angular4,是否有一些内置方法可以做到这一点,或者什么是最简单的方法?谢谢!
整个模板...(组件仍然是空的)
<div id="image-header">
<div id="intro">
<h1 class="text-center">Welcome to ThinkPlan</h1>
<h3 class="text-center">Planning your way</h3>
<a class="btn btn-outline-primary" href="#login" id="view">Try It</a> <!-- Where the user clicks to scroll -->
</div>
</div>
<div class="container" id="info">
<div class="row">
<div class="col-md-12">
<div class="space" id="login"></div> <!-- The place to scroll to -->
<h1 class="text-center">ThinkPlan</h1>
<form class="form-horizontal">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group" id="log-btn">
<div class="col-lg-10 col-lg-offset-2">
<button routerLink="/plan" type="submit" class="btn btn-outline-primary">Login</button>
</div>
</div>
<p class="lead text-center">New here? <a routerLink="signup">Sign up.</a></p>
</fieldset>
</form>
</div>
</div>
</div>
对于 Angular 6+,您可以使用:
-
在您的路由模块中:
imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled'})]
-
然后在你的组件html中
<a (click)="onClick('AnchorId')">Click me!</a>
<a (click)="onClick('OtherAnchorId')">Click me, too!</a>
...
<div id="AnchorId">...</div>
...
<div id="OtherAnchorId">...</div>
-
然后在你的组件 ts 中
import { ViewportScroller } from '@angular/common';
@Component({
selector: 'component-selector',
templateUrl: './mycomponent.component.html'
})
export class MyComponent {
constructor(private viewportScroller: ViewportScroller) {}
public onClick(elementId: string): void {
this.viewportScroller.scrollToAnchor(elementId);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)