Tengo una página de lista de productos con un botón de retorno para redirigir a la página de inicio. Quiero después de la redirección a la página de inicio, un desplazamiento hacia abajo a un div específico (en mi caso, un carrusel de productos)
Hice el desplazamiento, pero funciona cada vez que se carga la página de inicio, pero quiero el desplazamiento solo después de hacer clic en el botón de retorno, ¿cómo puedo hacer eso, por favor?
hay algo de codigo:
lista de la página del producto:
<a href="{{ path('home_index') }}" class="return-ad"> <img src="{{ app.request.getBaseURL()/arrow-white-left.png"> </a>página de inicio:
<div class="row align-items-stretch"> Some code here </div> <script> $(".return-ad").ready(function() { $('html,body').animate({ scrollTop: $(".align-items-stretch").offset().top}, 1000); }); </script>Alguien puede ayudarme por favor ? Soy nuevo en Jquery y JS
Gracias por adelantado
Para lograr esto, puede agregar un fragmento a la URL que se pueda detectar cuando se cargue la página de inicio:
En la página del producto, agregue un fragmento # a la URL:
<a href="{{ path('home_index') }}#foo" class="return-ad"> <img src="{{ app.request.getBaseURL()/arrow-white-left.png"> </a>Luego, en la página de inicio, detecta ese fragmento y realiza la animación:
jQuery($ => { if (window.location.hash && window.location.hash.substring(1) === 'foo') { $('html,body').animate({ scrollTop: $(".align-items-stretch").offset().top }, 1000); } }); También tenga en cuenta que el método ready() debe llamarse en el document , no en un elemento del DOM. Modifiqué el ejemplo anterior para usar la forma abreviada de un controlador de eventos document.ready