Question

我希望能够在按下按钮时滚动到目标。我在想这样的事情。

<button (click)="scroll(#target)">Button</button>

在我的component.ts中有一个类似的方法。

scroll(element) {
    window.scrollTo(element.yPosition)
}

我知道上面的代码无效，只是为了表明我的想法。我刚刚开始学习Angular 4而没有以前的Angular经验。我一直在寻找类似的东西，但所有的例子都在AngularJs中，与Angular 4有很多不同

Answer 1

你可以这样做：

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

然后在你的组件中：

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

编辑：我看到评论声明由于元素未定义而不再有效。我在Angular 7中创建了一个StackBlitz example，它仍然有效。有人可以提供一个不起作用的例子吗？

Answer 2

这是我使用角度4的方法。

模板

<div class="col-xs-12 col-md-3">
  <h2>Categories</h2>
  <div class="cat-list-body">
    <div class="cat-item" *ngFor="let cat of web.menu | async">
      <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
    </div>
  </div>
</div>

将此功能添加到组件中。

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

Answer 3

实际上有一种纯粹的javascript方法可以在不使用setTimeout或requestAnimationFrame或jQuery的情况下实现此目的。

简而言之，在scrollView中找到要滚动到的元素，然后使用scrollIntoView。

el.scrollIntoView({behavior:"smooth"});

这是plunkr。

Answer 4

参加这个派对的时间已经很晚了，但是我已经为Angular 4+编写了一个插件。它涵盖了您可能遇到的其他问题，例如服务器端渲染。您还可以动画滚动到您的喜好。完全披露，我是作者。

NPM: @nicky-lenaers/ngx-scroll-to

GitHub: @nicky-lenaers/ngx-scroll-to

希望这会帮助你！

Answer 5

Jon有正确的答案，这适用于我的角色5和6项目。

如果我想点击以平滑地从导航栏滚动到页脚：

<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>

scrollTo(className: string):void {
   const elementList = document.querySelectorAll('.' + className);
   const element = elementList[0] as HTMLElement;
   element.scrollIntoView({ behavior: 'smooth' });
}

因为我想从页脚回滚到标题，所以我创建了一个这个函数所在的服务，并将其注入到导航栏和页脚组件中，然后传入＆＃39;标题＆＃39;或者＆＃39;页脚＆＃39;需要的地方。只记得实际给组件声明使用的类名：

<app-footer class="footer"></app-footer>

Answer 6

在角度7中效果完美

HTML

<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>

在组件中

  scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
  }

Answer 7

在Angular中执行此操作的另一种方法：

标记：

<textarea #inputMessage></textarea>

添加ViewChild（）属性：

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

使用scrollIntoView（）函数在组件内部的任何位置滚动：

this.inputMessageRef.nativeElement.scrollIntoView();

Answer 8

在角度上，您可以使用ViewChild和ElementRef：给您的html元素一个参考

<div #myDiv >

并在您的组件内部：

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

您可以使用this.myDivRef.nativeElement转到您的元素

Answer 9

您可以使用下面的代码块滚动到视图上的任何元素ref。请注意，目标（elementref id ）可以位于任何有效的html标记上。

在视图上（html文件）

<div id="target"> </div>
<button (click)="scroll()">Button</button>

.ts文件中的

scroll() {
   document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}

Answer 10

您可以通过以下方式使用对角度DOM元素的引用来实现：

这里是stackblitz

中的示例

组件模板：

<div class="other-content">
      Other content
      <button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
        Click to scroll
      </button>
    </div>
    <div id="content" #element>
      Some text to scroll
</div>

Answer 11

我需要做这个技巧，也许是因为我使用了自定义HTML元素。如果我不这样做， target中的onItemAmounterClick将没有scrollIntoView方法

.html

<div *ngFor"...">
      <my-component #target (click)="clicked(target)"></my-component>
</div>

.ts

onItemAmounterClick(target){
  target.__ngContext__[0].scrollIntoView({behavior: 'smooth'});
}

Answer 12

我通过使用jQuery查找元素（例如document.getElementById（...））并使用.focus（）调用，做了类似于你所要求的事情。

Answer 13

您可以通过使用jquery来做到这一点：

ts代码：

    scrollTOElement = (element, offsetParam?, speedParam?) => {
    const toElement = $(element);
    const focusElement = $(element);
    const offset = offsetParam * 1 || 200;
    const speed = speedParam * 1 || 500;
    $('html, body').animate({
      scrollTop: toElement.offset().top + offset
    }, speed);
    if (focusElement) {
      $(focusElement).focus();
    }
  }

html代码：

<button (click)="scrollTOElement('#elementTo',500,3000)">Scroll</button>

将此功能应用于您要滚动的元素：

<div id="elementTo">some content</div>

Here是一个堆叠闪电样本。

在Angular 4中单击时滚动到元素

13 个答案: