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
1157 249 267

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


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
6915 1305 1333

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Not applicable

Hi ,

 

It is not working .

Dan-From-Ryviu
Shopify Partner
6915 1305 1333

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

theycallmemakka
Shopify Partner
1157 249 267

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


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
Not applicable

Great , it is working .

 

Thank You !!!!

theycallmemakka
Shopify Partner
1157 249 267

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

 

 

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store