Как сгладить прокрутку к привязке к странице в угловом 4 без плагинов правильно?

Чего я хочу добиться, так это щелкнуть и выполнить плавную прокрутку до нижней/указанной области div, которую я определяю с помощью хэштега, как я думаю, так и должно быть.

Вот живой пример в примере w3school, который написан для JQuery: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

Что я делаю, так это заглядываю в ответ: Angular2 Маршрутизация с хэштегом к привязке страницы

но я не очень понимаю ответ, ответ выглядит так:

эта часть HTML часть:

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

и ниже, router.navigate, где я должен поместить код? component.ts верно? но как мне получить доступ к этой функции? я должен реализовать (клик)?

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

и ниже этого я получаю это, что это должно написать в моем component.ts:

** Add Below code to your component to scroll**

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

что значит "некий путь"? Я должен добавить маршрут в мои route.ts правильно? обычно я добавляю новый путь, например, вот так:

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'product', redirectTo: '/product' },
  ...homeRoutes,
  ...productRoutes
];

Может ли кто-нибудь предоставить мне полный пример кода в HTML, маршруты и компоненты?

Ответы

Ответ 1

от того, что я читаю и что ищу, это будет адский код для просто SMOOTH SCROLL, это не просто как JQuery, я думаю, поэтому я решил использовать эти плагины, которые отлично работают: https://www.npmjs. ком/пакет/@Nicky-lenaers/NGX-прокручивать к

не стесняйтесь использовать его

Ответ 2

Я искал подобное решение и попытался использовать пакет ngx-scroll-to и обнаружил, что он не работает в последней версии angular (angular 6+), поэтому решил поискать другой вариант и нашел решение, которое использует браузер родной scrollIntoView и это пока лучшее решение

HTML код:

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

Код Ц:

scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }

Ответ 4

Только CSS решение

html {
  scroll-behavior: smooth;
}

Работает даже после навигации или перезагрузки страницы.

Обратите внимание, что он не работает в IE, Edge или Safari.

Ответ 5

Попробуйте удалить квадратные скобки:

class="startScroll" scrollTo="'#firstDiv'" scrollBoxID="'#scrollBox'"

Ответ 6

Я просто использовал ngx-page-scroll. Это может быть так просто, как:

<a class="nav-link nav-item-text" pageScroll href="#categories">Categorias</a>

....

<section id="categories">

Посетите страницу пакета для получения дополнительной информации: https://www.npmjs.com/package/ngx-page-scroll

Он также предоставляет механизмы для настройки процесса прокрутки или события, реализующего пользовательское поведение с помощью службы, которая управляет прокруткой из контроллера компонента.

Ответ 7

Сначала создайте директиву прокрутки

import { Directive, HostListener, Input, OnInit } from '@angular/core';
declare var $: any;

@Directive({
    selector: '[scrollTo]'
})
export class ScrollToDirective implements OnInit {

    @Input('scrollTo') scrollTo: string;
    @Input('scrollBoxID') scrollBoxID: string;

    constructor() { }

    ngOnInit(): void {

    }

    @HostListener('mousedown')
    onMouseClick() {
        var id = this.scrollTo;
        var scrollBoxID = this.scrollBoxID;
        var elementOffset = $(scrollBoxID).offset().top + 10;

        $(scrollBoxID).animate({
            scrollTop: $(scrollBoxID).scrollTop() + ($(id).offset().top - elementOffset)
        }, 1000);
    }
}

Вот ваш html-код

<li>
    <label class="startScroll" [scrollTo]="'#firstDiv'" [scrollBoxID]="'#scrollBox'"> First </label>
</li>
<li>
    <label class="startScroll" [scrollTo]="'#secondDiv'" [scrollBoxID]="'#scrollBox'"> Second </label>
</li>

<div id="scrollBox">
     <div class="first" id="firstDiv"></div>
     <div class="second" id="secondDiv"></div>
</div>