相关疑难解决方法(0)

我想补充一些链接我Angular2页面上,当点击,将跳转到特定位置内该页面,像什么正常的井号标签做.所以链接会是这样的

/users/123#userInfo
/users/123#userPhoto
/users/123#userLikes

等等

我不认为我需要HashLocationStrategy,因为我对正常的Angular2方式很好,但是如果我直接添加,链接实际上会跳转到根目录,而不是同一页面上的某个地方.任何方向表示赞赏,谢谢.

在html中是否有一个方法使网页使用HTML滚动到特定的元素!

我试图在同一页面上做一个简单的滚动到一个锚元素.基本上,该人点击"试一试"按钮,它会滚动到页面下方的区域,其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 …

尝试使用以下语法滚动到锚链接.

<a [routerLink]="['./']" fragment="test">Testing</a>

锚节点看起来像这样

<div id="test">

单击时,浏览器地址栏显示#test片段,但不会自动滚动.知道它为什么不滚动？

我正在使用此代码使我的应用程序在更改路线时滚动到顶部，一切正常，但我想在更改查询参数时禁用此选项。我有角度材质选项卡，我的查询参数定义了访问页面时应该打开哪个选项卡，但是当我更改选项卡（也更改 url）时，它会自动滚动到顶部

我认为不可能做到简单，但也许你有答案

  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled'
  })]

我希望仅更改选项卡时应用程序不会滚动顶部

使用scrollPositionRestoration: 'enabled'forRouterModule确实是一个不错的功能，但如何禁用滚动动画/平滑滚动以便它捕捉到该位置？

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
    }),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

背景：平滑滚动感觉不像浏览“正常”网站，因为通常如果来回导航，就不会平滑滚动。

它应该很简单，但从昨天开始，我试图在页面上平滑向上滚动。滚动功能有效，但不能平滑滚动。

我试过 : scrollIntoView({behavior: 'smooth'})，但它不起作用。

这是我的 html 组件

        <div *ngIf="displayNoneOnBtn" [hidden]="!displayNoneOnBtn"  id="btnTest" class="shadow d-flex flex-column align-items-center justify-content-center">
            <ng-container *ngIf="!disableBtn">
                <i class="material-icons arrow-up-button" (click)="scrollTopWindow()">keyboard_arrow_up</i>
            </ng-container>
            <ng-container *ngIf="disableBtn">
                <i class="material-icons arrow-down-button" (click)="scrollDown()">keyboard_arrow_down</i>
            </ng-container>
        </div>

还有我的 TS 组件

    import {Component, OnInit, ElementRef} from '@angular/core';
import 'hammerjs';
import { SessionService, UiService } from 'src/app/core/services';

@Component({
    templateUrl: './frontend.component.html',
    styleUrls: ['./frontend.component.scss'],
})

export class FrontendComponent implements OnInit {
    top: number;
    disableBtn = true;
    scrollHeight: number;
    displayNoneOnBtn = true;

    constructor(
        public sessionService: SessionService,
        public uiService: UiService, …