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