restoration - scroll to top on route change angular 4

¿Cómo suavizar el desplazamiento al anclaje de página en angular 4 sin complementos correctamente?

Question

Lo que quiero lograr es hacer clic y hacer un desplazamiento suave al área div inferior / especificada que defino con el hashtag tal como creo que debería ser así.

Aquí está el ejemplo en vivo en el ejemplo de w3school que está escrito para JQuery: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

Lo que hago es echar un vistazo a esta respuesta: Enrutamiento Angular2 con Hashtag para anclaje de página

pero realmente no entiendo la respuesta, la respuesta se ve así:

esta parte es parte HTML:

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

y debajo de esto, el router.navigate es ¿dónde debo poner el código? componente.ts ¿verdad? pero ¿cómo accedo a esta función? ¿Debo implementar (clic)?

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

y debajo de esto, lo entiendo, que debería escribir en mi 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) { }
  }

¿Qué significa el "somepath"? Debo agregar una ruta en mi route.ts ¿verdad? por lo general, agrego una nueva ruta aquí, por ejemplo, así:

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

¿Alguien puede proporcionarme un código de ejemplo completo en HTML, rutas y componentes?

Answer 1

Solución solo CSS

html {
  scroll-behavior: smooth;
}

Funciona incluso después de la navegación o la recarga de la página.

Tenga en cuenta que no funciona en IE, Edge o Safari.

Answer 2

Acabo de usar ngx-page-scroll . Puede ser tan simple como:

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

....

<section id="categories">

Visite la página del paquete para obtener más información: ngx-page-scroll

También proporciona mecanismos para configurar el proceso de desplazamiento o implementar un comportamiento personalizado a través de un servicio que controla el desplazamiento desde el controlador del componente.

Answer 3

Estaba buscando una solución similar e intenté usar el ngx-scroll-to y descubrí que no funciona en la última versión de angular (angular 6+), así que decidí buscar otra opción y encontré una solución que usa el navegador native scrollIntoView y esta parece ser la mejor solución hasta ahora

Código HTML :

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

Código Ts:

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

Answer 4

Intente quitar los corchetes:

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

Answer 5

Primero de crear directiva de desplazamiento

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);
    }
}

Aquí tu código 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>

Answer 6

Simplemente puede hacer esto en su componente.

const element = document.querySelector("#destination")
if (element) element.scrollIntoView({ behavior: ''smooth'', block: ''start'' })

Ref: native

Answer 7

por lo que leo y lo que busco, será un código increíble para un SMOOTH SCROLL, no es simplemente como JQuery, creo, así que decidí usar estos complementos que funcionan perfectamente: ngx-scroll-to

Sientase libre de usarlo