Solved

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

Not applicable

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 !!!

Accepted Solution (1)

theycallmemakka
Shopify Partner
1536 346 371

This is an 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

 

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
7968 1551 1579

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>

 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Not applicable

Hi ,

 

It is not working .

Dan-From-Ryviu
Shopify Partner
7968 1551 1579

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>

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

theycallmemakka
Shopify Partner
1536 346 371

This is an 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

 

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Not applicable

Great , it is working .

 

Thank You !!!!

theycallmemakka
Shopify Partner
1536 346 371

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

 

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com