I have a page of list of products with a return button to redirect to the homepage. I want after the redirection to the homepage, a scroll down to a specific div ( in my case, a carousel of products)
I did the scroll, but it works every time the homepage is loaded, but I want the scroll only after clicking to the return button, how can I do that please ?
there is some code :
list of product page :
<a href="{{ path('home_index') }}" class="return-ad">
<img src="{{ app.request.getBaseURL()/arrow-white-left.png">
</a>
homepage :
<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>
Someone can help me please ? I'm new on Jquery and JS
Thanks in advance
To achieve this you could add a fragment to the URL which can be detected when the home page next loads:
In the product page add a # fragment to the URL:
<a href="{{ path('home_index') }}#foo" class="return-ad">
<img src="{{ app.request.getBaseURL()/arrow-white-left.png">
</a>
Then in the home page, detect that fragment and perform the animation:
jQuery($ => {
if (window.location.hash && window.location.hash.substring(1) === 'foo') {
$('html,body').animate({
scrollTop: $(".align-items-stretch").offset().top
}, 1000);
}
});
Also note that the ready() method should be called on the document, not an element in the DOM. I amended the example above to use the short-form of a document.ready event handler