Jump to content

using anchors in the shop

Recommended Posts

Site URL: https://mikihasa.com

Hello Experts,

Our shop currently has a large header graphic, and when you scroll past it to where the categories are listed and click one, the category page loads from the top again.  For example, if you click on this link: https://www.mikihasa.com/shop/rainbows/ that will load at the top.  However, if I could add an anchor near the Shop/Categories section like <p id=here></p> and then use #here in the link above, it would jump down to that part of the page.  Make sense?  Here's a link to the Squarespace support article that describes how to do it: https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links

I looked at the page source for the Shop and found an id= in the vicinity of where the link should jump to, and so here's an example of where I'd like the link to point: https://www.mikihasa.com/shop/rainbows/#page-section-61f4bd35e06b2551e3536224 but I am not sure if that id will change over time, so I'd like to use a custom one that I control so I could be sure it would stay the same.

If it is possible to insert such a block, then I'll also need to be able to edit the links for the categories to add the #here (or whatever) to those links.

Please let me know if this level of customization on this kind of page is possible, or if I need to use some other method (or redesign the page).

Thank You,

Kim at Mikihasa Decor

Link to comment
14 minutes ago, MiKiHaSa said:

If it is possible to insert such a block, then I'll also need to be able to edit the links for the categories to add the #here (or whatever) to those links.

I just got excited when I found that I could edit the URL slugs for the categories, but unfortunately, adding a # sign or anything other than A-Z and 0-9 appears to not be possible (see below).

Any other ideas?



Link to comment

I also tried a little Javascript header injection in the Shop ("footer-sections" is another id in the HTML):

var top = document.getElementById("footer-sections").offsetTop;
window.scrollTo(0, top);

It does show up in the header source of the page, but it doesn't cause the scrolling to occur.  Even this doesn't work:


I tried those on the main Home page of the site (not in the shop) and they didn't work there, either.  Using them as part of the slug definitely works (e.g. here, try this...it should jump to the bottom: https://www.mikihasa.com/shop/#footer-sections)

Any other ideas from the experts here would be greatly appreciated!  I am hoping to avoid a redesign...

Kim at Mikihasa Decor

Link to comment

here's an answer:

  1. look for and id= on your shop page that's close to where you want to jump down to
  2. use that id in something like this:
<script src="https://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $( document ).ready(function() {
    console.log( "ready!" );
    const id = "page-section-61f4bd35e06b2551e3536224"
    $("a[href='/shop']").attr("href", ("/shop/#" + id));
    $("a[href='/shop/rainbows']").attr("href", ("/shop/rainbows/#" + id));

that will replace the href slugs with updated ones that include the id, and when they're followed, the links will cause the page to jump down the page a bit

i need to do some more work on this script, since i don't think i can count on that id to always be there, and also every time i add a category, i'll need to add a line.

the thing that took me the longest to figure out was the ready block...as you might be able to tell, i have never used javascript before, and so i didn't realize i had to wait for the page to load in order to start making changes (duh).

i only figured it out when i put the same code in both the header and the footer and saw that it worked in the latter and not the former.  i searched for "javascript document" and this was one of the hits.  eureka!

much thanks to the jquery folks...looking forward to learning more!  please let me know if i can help you in any way...i am always willing to take a look at something, and we can figure it out together!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.