How to make page scroll to top when selecting and unselecting the filter .

[Anonymous]

Hello there , 

Is there any way to make it appear to look like the site or page to scroll completely to the top when selecting or unselecting any filter from the filter options. 

Thank You !!!

[Dan-From-Ryviu]

Hi @Anonymous 

You can try to use this code in your theme.liquid file before </body> tag in Online store > Themes > Edit code 

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
 $(document).ready(function(){
   $(".facets__item .facet-checkbox").click(function() {
    $(".collection-grid-section").animate({ scrollTop: 0 }, "slow"); 
   });
});
</script>

[Anonymous]

Hi ,

It is not working .

[Dan-From-Ryviu]

Please try to update code like this and check again 

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
 jQuery(document).ready(function($){
   $(".facets__item .facet-checkbox").click(function() {
    $(".collection-grid-section").animate({ scrollTop: 0 }, "slow"); 
   });
});
</script>

[theycallmemakka · Accepted solution]

Hi @Anonymous ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<script>
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('change', function(event) {
        var target = event.target;

        if (target.matches('.facet-checkbox input')) {
            setTimeout(function() {
                scrollToTop();
            }, 600);
        }
    });
});
</script>

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Anonymous]

Great , it is working .

Thank You !!!!

[theycallmemakka]

Happy to hear that work. If you require any other help, feel free to reach me out.