Saltar al contenido

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

Intenta comprender el código bien previamente a adaptarlo a tu trabajo si tdeseas aportar algo puedes dejarlo en la sección de comentarios.

Solución:

Estaba buscando una solución similar e intenté usar el paquete 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 nativo del navegador. scrollIntoView y esta parece ser la mejor solución hasta ahora

Código HTML :


Your target

Código Ts:

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

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.

Simplemente puede hacer esto en su componente.

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

Ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Recuerda algo, que puedes optar por la opción de interpretar tu experiencia si te fue preciso.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *