Make product categories act like filters without loading the page again and again

@Yoline, I am having the same problem.
I agree, it's annoying to have the page reload to the top each time a category is chosen. 
I want my customers to easily switch between categories without having to scroll down from the top of the page each time. 

Have you found an answer by contacting Squarespace support? Or have you privately emailed/messaged any of the community developers? 
I'm surprised this question hasn't been asked and answered before.

I will contact Squarespace support when they are available. But I will directly ask some of the community developers... 
@tuanphan @rwp @paul2009

I agree with you that anchor links are part of the solution. 
I know how to add an anchor link using a code block right above the categories, but I don't know how to change where the categories link to. 

I've even tried looking at the Inspector, but I don't have any experience coding.



 

Here's my website: www.BrendanAlexPhoenix.com
Version 7.0– York family (Jones template)
And here's the product page with categories: www.BrendanAlexPhoenix.com/prints
(I have three product pages: Cards/Prints/Free)

I wonder if this has to be done via the 'Code Injection' under 'Advance' for each product page. 

Hopefully we can get this solved sooner than later this time. 🙂
 

Solving this problem would greatly help my customers. 

I think the code (you sent me) will work in this case. How do you think? @rwp

@CptFeeny You can contact him.

It should work. Is the site 7.1?

Click the link in my signature. Click the codepen link on my page.

There should be a pen called Scroll to products on cat change.

See if that works.

Don't forget to follow the instructions in my signature for setting up jQuery.

 @rwp Thanks for the reply! 🙂

Just checked. Version is 7.0
Updated my original comment. 

@tuanphan Thank you 
 

I haven't tested it on 7.0

Let me know if it works, if not, we can modify it.

@rwp 

I tried my best to follow the instructions and free code you kindly provided, 
but it did not work for me. 

This must be because I have Version 7.0? 

Here's a screenshot of the code I'm using. 

@CptFeeny Sent you a message.

Hi @rwp,

I'm trying to do the same thing but failed.

I'm on 7.1 and used the following code on Code Injection / Header:

<script
              src="https://code.jquery.com/jquery-3.5.1.min.js"
              integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
              crossorigin="anonymous"></script>

$(document).ready(function() {
  var catLink = $('a.category-filter-link.category-filter-link-all');
  var _href = $(catLink).attr("href");
  $(catLink).attr("href", _href + '?');

  var urlCat = window.location.href.split("?")[1];
  if (urlCat !== undefined) {
    var prodTop = $('section:nth-of-type(2)')
    $('html,body').animate({
      scrollTop: $(prodTop).offset().top
    }, 0);
  }
});
</script>

I'm not familiar with coding. Could you help me?

Thanks!

Please post a link to your page.

It's https://mistoa.mx/tiendalavabos

password: 1234

I appreciate any help, @rwp

You are missing an opening <script> tag.

That being said, the category layout is different on your page, and the code will not work for you.

Thanks @rwp