Прокрутите до якоря, не работая

Попытка прокрутить ссылку привязки с использованием следующего синтаксиса.

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

И якорь node выглядит следующим образом

<div id="test">

При нажатии на адресную строку браузера отображается фрагмент #test, но автоматическая прокрутка не происходит. Любая идея, почему она не прокручивается?

Ответы

Ответ 1

На основе @vsavkin обходного пути и использования преимуществ, что фрагменты предоставляются как наблюдаемые (с использованием "@angular/core": "^2.3.1"):

class MyAppComponent implements OnInit{

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.fragment.subscribe(f => {
      const element = document.querySelector("#" + f)
      if (element) element.scrollIntoView()
    })
  }
}

Ответ 2

Я предполагаю, что прокрутка еще не реализована с помощью angular 2. Мое решение подобной проблемы (прокрутка на якорь на той же странице) заключалось в использовании ng2-page-scroll.

Ответ 4

Я могу предложить пользователю ng2-page-scroll

ng2-page-scroll

установить

npm install ng2-page-scroll --save

импортировать в ваш app.module.ts

import {Ng2PageScrollModule} from 'ng2-page-scroll';

@NgModule({
    imports: [
        /* Other imports here */
        Ng2PageScrollModule
        ]
})
export class AppModule {
}

проверить его в компоненте html

<a pageScroll href="#test">Testing</a>
<div id="test">

Ответ 5

Начиная с версии Angular 6.1, для маршрутизатора есть anchorScrolling :

  1. Установите это в app.module.ts

       imports: [
     RouterModule.forRoot(routes, {
       scrollPositionRestoration: 'enabled', // or 'top'
       anchorScrolling: 'enabled',
       scrollOffset: [0, 64] // [x, y] - adjust scroll offset
     })
   ],
   exports: [RouterModule]

  2. HTML

     <div id="test">
   // contents goes here...
 </div>



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

  3. Импортируйте теперь viewScroller, в котором появилась новая функция Angular v6 (это не обязательно):

     import { ViewportScroller } from '@angular/common';

 constructor( private viewportScroller: ViewportScroller ) 

 ...

 scrollToTest() { 
   this.viewportScroller.scrollToAnchor('test');
 }

Ответ 6

Мне понравилось использовать этот

scroll(container, target) {
    let scrollTo = target.getBoundingClientRect().top;

    $(container).animate({
      scrollTop: `+=${scrollTo}`
    }, 900);
}

тогда в HTML сделайте что-то вроде

<div #container> <!-- Scrolling container -->
    <button (click)="scroll(container, intro)">Go To Intro</button>
    <!-- other content -->
    <div #intro></div>
</div>