Jquery scroll down only after redirection

user_18245746 0
Viewed 36

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

jquery javascript
1 Answers

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

user_5194130
Related