Can you change your URL when clicking links to different sections on the same page?

Question

Can you change your URL when clicking links to different sections on the same page?

I have a product list separated by different categories on the same page... these categories are using the hyperlink code as follows:

<a href="#product category3">Take me to the product category 3.</a>

<a href="#top">Take me to the top of the page.</a>

Question

Can I make these each have their own URL when clicked while still stay being on the same page?

Why am I asking?

I would like to also add Breadcrumbs. Where when a person wants to click one of these products to find out more information, they will be sent to a sperate page altogether.

I was wondering to either have breadcrumbs laid out like this:

Home > Product List > Product 3

or laid out like this:

Home > Product List > Product Category > Product 3

Product List and Product Category are on the same page, yet if one wants to go back to the previous page once they have finished with looking at product 3, they would be brought back to the top of that category instead of the top of the page.

Answer 1

The simplest thing to do would be to just use the same fragment identifier (link with the # symbol) that you are already using. Is there any reason you can't add that as the link in your bread crumb.

Using your bread crumb example:

Home > Product List > Product Category > Product 3

If you want to link directly to the product category section on the product list page:

<a href="/product-list.html#product-category">Product Category</a>