Omg this is exactly what i was looking for! So clear and informative :) I loved all the little hacks and code tricks you added as well, such great knowledge to have :) thank you for making this info so accessible ❤
Thank you very much. I actually needed a direct 'jump" to a place on another page, so I just used the full URL of the page, followed by the /#your-id-here. It seems to be working.
Thank you!! Following your clear instructions, I was able to add needed links super quickly! [7.1 version] I am surprised Squarespace doesn't include anchor links in their program... but you saved me!
Wow! Super helpful! Haha I had used a code that was working for a year or so and it stopped working on the 7.0 template, but this tutorial helped out a ton to get it back to working again. Phewf!
You can find all of the copy + paste codes from the video in this post www.bigcatcreative.com/blog/page-jump-links-squarespace ❌IF YOUR 7.1 SECTION ID CODE ISN'T WORKING it may be because you're using Fluid Engine sections (learn more about Fluid Engine here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xWP2EHiPhAw.html) so just use the 3rd coded technique instead 🙂
A very clear, straight foward tutorial. Thanks! What if you want to add a link in your footer (quick links) that takes you to a specefic section of page? I just try to add a link to a text, but there is no "URL" option.
Yes you can just add a link to your text. Click to add a link and just paste your URL in there. Otherwise, click on the cog/wheel icon and it will open the settings, and you can paste in an "external URL"
I got this to work by adding the page name before the section id. For example: #page-section-61de083e1131672bfb5e0654 turns into /examplepage#page-section-61de083e1131672bfb5e0654
Thanks so much for this tutorial, love your work, Erica! Quick question - do you know why this anchor link strategy doesn't work with the new list sections?
Hey Belinda! Not sure sorry, I've never tried it out! I'm sure it would work but probably instead of #page-section it will be #list-section or something silly like that :) Otherwise, just use the code block method and put it above your list section
@@BigCatCreative thanks for the quick reply! Yeah, I spoke to SS - no code block option on list sections + they couldn't help me re. applying the anchor link via the section ID (like in your tutorial). However, I figured out a workaround by doing a code block anchor link in a separate section above the list section and just bringing the sections as close together as possible. Happy enough with the result! Thank you for your help ☺️
This is great. Fluid engine however is behaving weirdly. Browsers don't end up at the right spot when clicking on the anchor link. Any idea why this might be happening? Sqsp doesnt support code as we know, so looking for ideas on how to fix.
Hey Jai! Hmm our anchor links on Fluid Engine are all working fine. Are you using the code method? Have you tested it outside of the editor? This is usually the problem, if you test the live site it should work, but let me know.
@@BigCatCreative this method is not working at all for me -- button / link edit boxes are glitched out when trying to add this code, and when saved, the button just re-opens the editor, rather than completing the jump-link to the bottom of the page. SS issues I think...
@@russlowe What do you mean by glitched out? All you need to add is the #ID. If this is glitching out then definitely a Squarespace problem, maybe try again later!
Hey Erica! Thank you for the tutorial, I'm interested in taking it a step further and creating a Dropdown anchor link like you have on your template showcase page. I can't find anyone on the internet who offers this instruction. Is this something you could help with?
Hey! This is a totally custom coded solution. I would look for a tutorial on how to create a custom coded dropdown menu. Then for each of those links in your dropdown you'd use an HTML link Link Text and for "yourlinkhere" you would use the section ID eg "#youridhere" - hope that helps
I am on 7.1 but unfortunately the anchor link method using the section ID is not working for me. Granted, this is with the latest upgrade that has a slight visual change from what's in this video from two years ago, so I'm not sure if they have actually changed how linking to sections actually works. I did try the block code method from the end of the video, and that did work! Thank you.
@@BigCatCreative Hi, thanks for your content. I'm trying to link to a section that was a "template section" when I first created. Consequently, I cannot see where I can add a block in a section that was created from a template, therefore, I cannot seem to add a block of code for the anchor link. Do you have any suggestions?
Hmm you should definitely be able to add a block. is it a Fluid Engine section, or a Classic Editor section? Fluid Engine click Add Block, Classic Editor click the Blue + icon. If you can't see either of those, Save > Refresh. If you still can't, contact Squarespace! squarespace.com/support@@zahirnathoo
Hi! This is SO helpful, thank you! Quick Q - do you know why it would be scrolling down to the top of the text in my section instead of top of the section? (7.1)
Hi much appreciated but I still have a problem. All I am trying to do, is set up an anchor link on a page in squarespace - and link to it from a Mail chimp email. Is this possible? I can get the button in Mailchimp to go to the page I want, but it just goes to top of page, not the anchor halfway down the page. All slugs are correct and iD's // Not sure what to do
Really appreciated this....but what about linking to a specific section on a different page? With the Squarespace ID finder, I grabbed the specific number, but placing it after #page-section- didn't work. Any help is appreciated, thanks!
For the 7.1 version, how can you make sure the anchor link works from another page in navigation? For instance, right now, the coded anchor links work perfectly on the home page, but if you go to another page and click the links in navigation, it doesn't click back through to the homepage/anchorlink spot. Does that make sense?
Hey Big Cat Creative. I'm using the fluid engine 7.1 but my Button link options do not have a clickthrough URL option. Only URL, File, email, phone. I am completely at a loss why everybody editing on squarespace has this except me (I am signed up to business template also). Can you offer any suggestions? I just want a button anchor!! =) Thanks in advance
It's so weird how neither of the options work for my 7.1. The id finder way opens another webpage before scrolling down and then the more manual way just opens a new webpage and remains at the top of the page
The last anchor technique only works once then it stops working. Trying to use this technique for one of the navigation link, but maybe it's not possible to do so ?
What if you want to link from just text i.e. a table of contents to a section? The link button in the text editor doesn't give you the option to do this.
The link editor has recently changed appearance. It has the same functions but works differently. You just need to type in your section id in the first box that shows up when you go to add a link!
Thanks for this! I am linking to different sections on different pages and I can get it to link to the different page, but it doesn't jump to the different section. My sections are actually blocks, but otherwise I don't understand why it's not working. Any tips?
Hey! I'm not sure what you mean by "my sections are actually blocks" - can you elaborate? As long as the followed the tutorial correctly it should work so just check your ID's and make sure you've included the # symbol too. You could also try testing it outside of the editor as sometimes it doesn't work while you're in the editor :)
@@BigCatCreative Awesome video, thank you! I am also having the same problem and was wondering the same thing. What i think Sydney is referring to is that each ID is either labelled an "item", "section" or "block." In your video you used a "section." I dont really have any sections in mine except for right up the top and bottom - only blocks. Does this also work when anchoring to a block? I cant seem to get it to work and done the trouble shooting that you suggested above. Thanks so much again for this super helpful video!!
@@dalaalai Yes it does also work when anchoring to a block ID! If you are using Fluid Engine though (the new squarespace 7.1 versionn) I recommend using method 3 with the codes.
Yes! In your Pages panel, click the + button to add a new "LINK" and then you add the same link information there as you would in a regular link as outlined in the video
Do you mind posting the code that makes it scroll smoothly so that I can copy it? Because I might not be interpreting what you pasted in CSS properly. It doesn't seem to have an effect. Thanks in advance.
Yes! The code for the smooth scroll is html {scroll-behavior: smooth!important;} You can find all of the copy + paste codes from the video in this post, too www.bigcatcreative.com/blog/page-jump-links-squarespace
Everyone is saying that it works, but somehow for me, nothing is happening. After performing all the steps, when I click the image that I linked to a specific section, it doesn't move at all. Do you have any ideas or suggestions?
Are there instructions to do this for a top nav. I want a single bar top navigation to scroll down to sections on a single page vs navigating to a new page.
Yes you can use the same method of using the page section ID. In your Pages panel add + a new LINK (instead of a page) to your Navigation and add your page section to this link.
@@BigCatCreative This works well thank you! But only on one page. I have a button on my nav bar and it works to scroll to a section on my homepage, but if I'm on a different page of the website and that section doesn't exist on that particular page, it doesn't do anything. Is there a way to have it link to back to the homepage and scroll down to that section when I'm on any other page other than the homepage? Hope that makes sense!
Sorry I don't have the capacity to troubleshoot individual problems. If you followed the exact step there's no reason if shouldn't be working! Maybe try the 3rd option instead. If you would like our support with it you can visit our extra support service here bigcatcreative.com/extra-support
i built a website using 7.1 that happened to keep getting longer. I kept adding sections thinking I can anchor to separate them as pages in the menu. Is that possible?
I must be missing something. I am using the Rally template and created an Index page so that I could use method one in your demo. My Home page is NOT an Index page, but the page I want to create the 'jump link' is an Index page. this is not working for me.
@@ericahartwick I'm having the same issue... I think. I want to post a blog on my 7.0 squarespace site that would then populate my linkedIn page. I'd like to have the link go to a specific part of a page not just the top of the page. It seems possible, maybe I'm missing something? Thanks in advance.
wait, wait, I got it to work. I deleted the "id" from the end the url after the "#section code. (I'm not a coder if you didn't get that already, ha.) Thanks
@@FreeDom-fv8wy Are you using the section ID tool outlined in the video? Or have you created a code block with a DIV ID? You need to find the ID first, then add it into the link. Exactly as we have outlined in the video, just instead of adding it into a text link, add it into your nav link.
Hey! To add to your Nav add a LINK then use the same process. If you are trying to link to a different page, but the page slug in front eg /page/sectionIDstuffhere If it's still not working, try it OUTSIDE of your editor, as sometimes isn't doesn't work well while you're in editor mode :)
@@BigCatCreative It didn’t work. I’m trying to create a testimonial link in the main navigation that jumps to the testimonial section on the homepage. I tried outside of the editor but still no luck.
@@shajuanna Hey! It definitely still works as I have it working on multiple websites. Check your codes, make sure your IDs match, double check it against the code in the post www.bigcatcreative.com/blog/page-jump-links-squarespace If you're still having trouble feel free to contact our extra support service bigcatcreative.com/support :)
Tried this for 7.1 and it does not work. I tried adding a link to a button or text and nothing happens when I click on it. I also do not have this "clickthrough url" box. The method for 7.0+7.1 seems to work but it never centres the section of the page, it always scrolls past the top of that section slightly even though my code block is at the very top of the section.
Hey Ghost. It definitely does work as I still use all methods. If nothing happens when you click your button either you haven't set it up correctly or you may need to refresh or test your page outside of the editor - sometimes testing doesn't work well within the editor so keep this in mind. For the second method I recommend putting the code block at the bottom of the section above, then it should land it about the right place :)
@@BigCatCreative Hey there, I'm having the same problem, when using the section id method nothing happens. Even when I go to the actual site page. I'm trying to link text to a section. Any help is appreciated!
God I really wish I didn’t switch the squarespace everything was so much easier and quicker in wix you just click anchor button and you can move it around the to where you want it 😅 I got convinced it was better but it definitely isn’t for someone who isn’t a pro!
Sorry to hear that! I think both platforms have a learning curve but once you know your way around them they're pretty easy. None of them are perfect though!
