Great video! I got a new client and had to update her Squarespace site. Unfortunately, her former webhost was a Squarespace guru, could code in Squarespace and had other extra abilities for using Squarespace's backend. Your videos, blog and other materials are lifesavers! Your directions are clear and easy to understand! Great stuff!
Yes, that's the only downside to going that route. You can use the other method shared to create a custom id that shows up at the end of the URL instead. Glad you found it helpful!
THANK YOU! I found this video after watching SS's content on the same topic. Your video was faster and easier. I gave you a shout on their video to direct to yours. Very appreciative.
Great video & very helpful! I'm so not techy and your video had the best explanation & was the most comprehensive. Thank you!! I was trying to add this into my blog post where I list out countries and it worked perfect!
@@LocalCreative weird one for me, but I created the button the same way you did and added the custom CSS, but instead of smooth scrolling it opens the website in a new tab to that section (mobile and PC)
Right?! And it's great for people on the lower tier Squarespace plan that don't have the code block option. The URL isn't as clean but most people won't notice that anyway :)
Thank you for an efficient and informative video. I got a lot out of it in a short amount of time. One detail that initially escaped me was that the code block, even though hidden, would take up space and mess up my formatting. Fortunately, I got clued in by reading the comments, and the Block ID method worked. I'm sure there is a way to prevent the code block from scrambling my formatting, but nothing I tried worked. I have curvy section dividers and an accordion drop down menu, which are the two things that went bonkers with the block code.
hello, is there any videos out there that have anchor links from the dropdown menu? I am building a site and I have a services page. we do about 7 services. I have been trying forever to figure out how to have it where I can click on lets say "plumbing" and have it go to plumbing on the same page as the rest of my other 7 services. thank you!
Such a great video thank you! An oddly specific question: I am using links to other pages, so I use the /home#about method for example. When I then on the homepage, it now reloads the page to the point I want, rather than nicely scrolling down. I guess because I'm telling it to go on the homepage...is there a nice way around this/did that make any sense?
Hi Michael! I don't know a way around this, but I will let you know if I find anything. Most often the goal is to get someone to the section they are interested in as fast as possible, but I understand wanting to keep the visual scroll element.
Great video! I was wondering if it was possible when clicking the anchor link and going to another page, to remove that split second of starting the page at the top, and just already be at the desired section?
I ran into a problem using the built-in code blocks. They take up physical space on the site, especially on the mobile site! Hiding them is not trivial. Some have said you can inject some CSS code to make its size 0 but I wasn't able to get it working. If you could post an update to this issue, or someone has a solution, please reply to let me know! I am using the block id method instead, but this is not as good, since it may scroll a little too far.
Hi thank you for the video, if I want to add an anchor to my navigation bar do I need a business account or can I use that function in a personal account? I am looking to keep my website simple with the navigation bar moving people down the page to the desired section. Thank you!
You can do this with a personal account, but you won't be able to get the smooth scroll effect included in my blog post (linked in the description). Hope that helps!
Hi there! thanks so much for this. I was wondering, we can only copy and use the block id codes, this does not seem to work for section block id codes, correct?
I have found it works best with block id codes. Some of the other ids I believe can change in Squarespace so you want to be careful. That's why I love the block ID tool mentioned in the video.
Is it possible to link a button to a section on another page? (So the button from the cover page would jump to a different page and scroll down to the section)
Thank you for this video. I have tried both methods and they both have the same problem. The anchor link goes to several lines below the block address. What can I be doing incorrectly?
Hmm always make sure to test in an incognito window or logged out of Squarespace. You could try to add a code block a little higher up on the page and use that method instead of the section ID. That way you have more control of where it jumps to on the page. Hope that helps!
This is a great video thanks but does the smooth scrolling work with the square space IDs and non coding option? also noticed a difference on the CSS used on the video compared to the code in your blog. Also does this technique work with just text links or do you have to create a button? Its not working for me at the moment! cheers
Thank you! Is there a way to link these anchor points into the header drop down menus? When I put the url slug & # button name, it won't redirect to that place on the page.
Ah yes! In that case include a forward slash and then the url slug and then the #id. That way it will go to a different page instead of looking for the id on the current page.
Ahh that wouldn't apply to this tutorial. It's also not great for SEO since Google prioritizes text that shows on the page when it first loads. I'll look into creating a new tutorial about this. It's much easier on a platform like Showit.
Hello, i tried smooth scrolling and it did not work. I followed the instructions to test on another page but nothing. Could it be due to changes in Squarespace? Seeing that the interface and menu items have changed since you posted this video.?
Hey super helpful video, but wanted to ask if there is anything that can be done to make this work on mobile. Not seeing it function on mobile when I try it, anything I am missing?
Is there a way to use an anchor link to jump to a hidden section on a page so that the section opens up if the anchor link is clicked on and then the section closes again once the user clicks out of it? I've seen photographers do for photo Galleries.
Ahh that's mostly likely done on Showit. That's a default feature of their platform using Canvas views. You could do it on Squarespace but it would require custom code.
Hello, I created a "list" section on my website but at the top of the section there's not a "+" sign to add code. Am I missing a step or do I need to use a different format to people to achieve the anchor link technique? Thanks in advanced!
Hi there, your video is amazing and super simple thank you! I'm wondering if you know how I can add an anchor to the Navigation Bar of the website? I have the business plan so I am able to code, I just want to have anchor links on the navigation bar. If you have a video for that or a blog post that would be super helpful. Thanks so much! :)
Hi Samantha! You can definitely add an anchor link to the navigation using the steps. You'll want to add a link instead of a page to your main navigation and add the url as /pagename#ID1235 Keep in mind this will only work properly when you are previewing the site logged out or in an incognito window. It doesn't always work when you're logged into Squarespace.
I have tried adding this code and it does not appear to work. Following your instructions precisely and it looks so simple so I'm at a loss. There is a space between the div and id correct? Also on the source page I have options (like email and page etc) that aren't in your video. Any suggestions?
If you would like to target a section on the same page you just use a custom link in your menu and add #YOURSECTIONIDNAME for the URL. Hope that helps!
You want to use "id" instead of "name" the # symbol stands for id. So your link you would put #whereyouwanttogo as the URL and your target section on the same page should be in a code block My blog post may make more sense: localcreative.co/blog/create-anchor-links-in-squarespace/
Hello, Thank you for this very useful tutorial! But I just have one question: The smooth function doesn't work on the home page. Because the first address that appears is a ".com". But the destination path must be a ".com/home#destination". Which is therefore considered to be a new page and cancels the smooth function. Do you have any solution to fix this please? Thank you so much !
It will still work on the homepage. Just link to /#id rather than having /home/#id You don't need the full url. Just the last part. :) Hope that helps!
Are you still logged into the Squarespace admin by chance? This should work fine if you are logged out and viewing as a normal visitor would :) Hope that helps!
@@LocalCreative the anchor buttons work amazing but, for some reason, when I go onto any page that includes the code , it jumps to the bottom of the page by itself without ever pressing any button
Hello, thank you for the video. Anchor links work perfectly except for one Case, in the navigation menu, where I have a dropdown included (services). I have a one-page website (aside from single services with subpages) and a dropdown (named Services) in the navigation panel. I added an anchor link to a particular website section (services). When I click on the "Services" the link doesn't "jump" the section of the website. Instead, the screen goes blank. Other anchor links work; the only one causing problems is this one from the title of the dropdown menu clickable. Can you help me out? P.S. I used another tutorial in order to make dropdown clickable (ruclips.net/video/fFMVZUoDEYs/видео.html&ab_channel=WillMyers) Thank you in advance!
Great video! I got a new client and had to update her Squarespace site. Unfortunately, her former webhost was a Squarespace guru, could code in Squarespace and had other extra abilities for using Squarespace's backend. Your videos, blog and other materials are lifesavers! Your directions are clear and easy to understand! Great stuff!
Thanks for sharing! I'm so glad you have found the tutorials helpful :D Best of luck with your client.
Holy eff. I never comment on YT vids but this actually worked and my jaw dropped after a night of frustration with codes.
I did notice that the copied block (for personal SS plans) appears in the URL after clicking the table of contents
Yes, that's the only downside to going that route. You can use the other method shared to create a custom id that shows up at the end of the URL instead. Glad you found it helpful!
I'm new here and I am very impressed that you included something for us non-coders. Thanks.
Of course! Glad you enjoyed the tutorial.
THANK YOU! I found this video after watching SS's content on the same topic. Your video was faster and easier. I gave you a shout on their video to direct to yours. Very appreciative.
Awesome, thank you! I really appreciate it :D So thoughtful of you!
The id finder is way too easy and convenient! Thanks so much!!!
Right!? Such a simple way to make it work!
Did the no-code version after downloading chrome to get that extension - Worked as described! Thank you
Great video & very helpful! I'm so not techy and your video had the best explanation & was the most comprehensive. Thank you!! I was trying to add this into my blog post where I list out countries and it worked perfect!
Thank you so much! I appreciate your kind words. I'm glad to hear you enjoyed the video!
I had a problem but after watching this video I solved it. Thank you for this video
You're so welcome!! Thanks for letting me know :)
Thank you for this. It was actually as simple as you showed and worked! Thank you!!!
So glad to hear it!
@@LocalCreative weird one for me, but I created the button the same way you did and added the custom CSS, but instead of smooth scrolling it opens the website in a new tab to that section (mobile and PC)
So incredibly helpful! You made this so easy to do, thank you!
Glad to hear it!!
This even worked for me without Business Plan, very helpful thanks!!
Fantastic!
Amazing video! Super easy to follow and concise :) Thank you!!
Thank you!
I am so grateful for this video
Best Explanation! Clear and Easy Instructions!
Glad it was helpful! Thanks for letting me know!
Used it. The smoothing css is a big bonus!
Right?! It looks so professional.
Your video has saved me so many times! Thank you!
I'm so glad! Thanks for sharing :D
I could literally cry! Thank you!!!!
You're SO welcome!!
Thank you so much! Learned something new today! I appriciate your tutorial so much!
I'm so glad! Thanks for taking the time to comment and let me know :)
Very useful, esp the block ID method, which avoids having to work out how to stop code blocks taking up space on the site.
Right?! And it's great for people on the lower tier Squarespace plan that don't have the code block option. The URL isn't as clean but most people won't notice that anyway :)
This was great, thanks! The smooth scrolling should have been a standard option. :)
Right?! Agreed.
Hey Galen! Thank you so much, I would love to see more videos from you 🥰😍
More to come soon! So glad you found this helpful.
You are heaven sent!
Thank you SO MUCH for this video-it was a lifesaver!! 👏
You're so welcome! Glad you found this video helpful! Such a great Squarespace trick!
This was super helpful thank you so much. I can’t get the smooth scroll to work though. Is there an update?
It should still work! I would try checking when you're logged out of Squarespace.
such a well explained video, thank you for your help.
You're very welcome!
Thank you for an efficient and informative video. I got a lot out of it in a short amount of time. One detail that initially escaped me was that the code block, even though hidden, would take up space and mess up my formatting. Fortunately, I got clued in by reading the comments, and the Block ID method worked. I'm sure there is a way to prevent the code block from scrambling my formatting, but nothing I tried worked. I have curvy section dividers and an accordion drop down menu, which are the two things that went bonkers with the block code.
You could try setting the height: 1px; so that the code block isn't very tall. That may work :)
Exactly what is was looking for, thank you!
Glad I could help! Thanks for taking the time to leave a comment!
This is a game changer. Thank you!!!
So glad to hear it!!
hello, is there any videos out there that have anchor links from the dropdown menu? I am building a site and I have a services page. we do about 7 services. I have been trying forever to figure out how to have it where I can click on lets say "plumbing" and have it go to plumbing on the same page as the rest of my other 7 services. thank you!
Yes! You can do this using the same strategy.
Such a great video thank you! An oddly specific question: I am using links to other pages, so I use the /home#about method for example. When I then on the homepage, it now reloads the page to the point I want, rather than nicely scrolling down. I guess because I'm telling it to go on the homepage...is there a nice way around this/did that make any sense?
Hi Michael! I don't know a way around this, but I will let you know if I find anything. Most often the goal is to get someone to the section they are interested in as fast as possible, but I understand wanting to keep the visual scroll element.
Great video! I was wondering if it was possible when clicking the anchor link and going to another page, to remove that split second of starting the page at the top, and just already be at the desired section?
I haven't found a way around this, but you can remove the smooth scroll css and try that!
This video was so helpful. Thank you so much!!!!!!!!!!!!!!
I'm so glad! Thanks for watching.
I ran into a problem using the built-in code blocks. They take up physical space on the site, especially on the mobile site! Hiding them is not trivial. Some have said you can inject some CSS code to make its size 0 but I wasn't able to get it working. If you could post an update to this issue, or someone has a solution, please reply to let me know! I am using the block id method instead, but this is not as good, since it may scroll a little too far.
Hi thank you for the video, if I want to add an anchor to my navigation bar do I need a business account or can I use that function in a personal account? I am looking to keep my website simple with the navigation bar moving people down the page to the desired section. Thank you!
You can do this with a personal account, but you won't be able to get the smooth scroll effect included in my blog post (linked in the description). Hope that helps!
Worked perfectly! Thank you!
Great to hear! Thanks for letting me know :D
Thanks much for this information. Do you know how I can add animation to the transition from services button to services section?
Oh I'm sorry. I hadn't finished watching the video hahaha
Oh good! I see you found the "smooth scroll" :)
great video and thank you for making it simple (unliked the Squarespace help page)
Glad it helped! Thanks for taking the time to comment :)
Thank you!! Life saver!
Wonderful video!!!! Regarding the chrome extension, do you know if there's a similar extension for Safari? Thanks.
I don't believe so! That's the only extension right now that I know of that even comes close. It's really great.
Hi there! thanks so much for this. I was wondering, we can only copy and use the block id codes, this does not seem to work for section block id codes, correct?
I have found it works best with block id codes. Some of the other ids I believe can change in Squarespace so you want to be careful. That's why I love the block ID tool mentioned in the video.
SUPER HELPFUL!!! Thank you so much!
You're welcome! Thanks for watching!
Is it possible to link a button to a section on another page? (So the button from the cover page would jump to a different page and scroll down to the section)
Yes! That's covered in this video. Just make sure to include the new page URL and then after the slash add the # sign and the ID. Hope that helps :)
Thank you for this video. I have tried both methods and they both have the same problem. The anchor link goes to several lines below the block address. What can I be doing incorrectly?
Hmm always make sure to test in an incognito window or logged out of Squarespace. You could try to add a code block a little higher up on the page and use that method instead of the section ID. That way you have more control of where it jumps to on the page. Hope that helps!
Great easy to follow explanations. thank you
Thanks for letting me know!
God bless you, it's really helpful and very easy to do
It's my pleasure! Thanks for watching.
Thank you very very useful!!!
Hi there! When I do this block ID method, it only works once. If I scroll back up and click it again, it doesn't work. Any thoughts?
Make sure you are logged out of Squarespace or viewing in an incognito window.
This is a great video thanks but does the smooth scrolling work with the square space IDs and non coding option? also noticed a difference on the CSS used on the video compared to the code in your blog. Also does this technique work with just text links or do you have to create a button? Its not working for me at the moment! cheers
got it to work with the ID Tags not sure what I was doing wrong! scroll code working also :) thanks
Yes it should work with both! Hope you were able to get it to work properly.
great video thank you. I would turn the background volume down a bit but that's all
:)
Thanks. :)
Thank you! Is there a way to link these anchor points into the header drop down menus? When I put the url slug & # button name, it won't redirect to that place on the page.
Ah yes! In that case include a forward slash and then the url slug and then the #id. That way it will go to a different page instead of looking for the id on the current page.
What if I want it to show the section only when I'm clicking but not to show as scrollable??
Ahh that wouldn't apply to this tutorial. It's also not great for SEO since Google prioritizes text that shows on the page when it first loads. I'll look into creating a new tutorial about this. It's much easier on a platform like Showit.
Hello, i tried smooth scrolling and it did not work. I followed the instructions to test on another page but nothing.
Could it be due to changes in Squarespace? Seeing that the interface and menu items have changed since you posted this video.?
This is still working for me. Make sure you are viewing in a logged out browser or incognito window. It won't work when you are logged in :)
Thanks was very helpful to me
Glad to hear it! Thanks for sharing!
Great video, to the point, and perfectly explained, Thank you!!
Glad it was helpful! Thanks for leaving a comment. Really appreciate it!
Thanks! should have started with the last part first lol
Next time! Thanks for the feedback.
Thank you so much - love ya lots for this solution!
You're so so welcome :D
Does this only work once you're launched and in a paid site? I can't get it to work while on a trial / in the build out phase. Thanks.
It only works when not logged in. You can add a password to your site and open it in a new incognito window and test it there. :)
Can you do this tutorial for Squarespace 7.1
This still works in Squarespace 7.1 :)
Hey super helpful video, but wanted to ask if there is anything that can be done to make this work on mobile. Not seeing it function on mobile when I try it, anything I am missing?
Hmm I would check you have the code exactly the same as in my tutorial. It should work just fine on mobile.
Hmm. I tried putting in my code: but the text "kuvat" shows up red and the link doesn't work. What did i do wrong? Has Squarespace changed?
Make sure it's in an embedded code block and not a block that's designed to show code if that makes sense :)
Thanks! It was super helpful
Glad it helped! Thanks for watching and leaving a comment!
Is there a way to use an anchor link to jump to a hidden section on a page so that the section opens up if the anchor link is clicked on and then the section closes again once the user clicks out of it? I've seen photographers do for photo Galleries.
Ahh that's mostly likely done on Showit. That's a default feature of their platform using Canvas views. You could do it on Squarespace but it would require custom code.
I used the Smooth Scroll code in CSS, but now anytime i scroll away from the area it forces me back to the same link area. How do I fix this?
It should only be triggered by a link that takes you to a section on the page and not all of your links if that makes sense.
Hello, I created a "list" section on my website but at the top of the section there's not a "+" sign to add code. Am I missing a step or do I need to use a different format to people to achieve the anchor link technique? Thanks in advanced!
Are you using an older version of Squarespace? You might be using 7.0 and not 7.1.
So helpful!!! Thank you so much!
So glad! Thanks for commenting to let me know.
Hello, i tried that but it doest let me add the hashtag i dont know why
Just make sure you are linking to a URL and not another page. Hope that helps!
worked excellently ... thanks a lot :)
You're welcome! Thanks for letting me know :D
Works well, but it scrolls and jumps much faster than I need. Any way to slow it down?
Did you add the smooth scroll css included in the blog post linked in the description? That definitely helps.
Im trying to link a galley picture to a section of a page but pages are not indexed to show section pages …
The page sections aren't indexed separately in Google. Hope that helps!
Hi there, your video is amazing and super simple thank you! I'm wondering if you know how I can add an anchor to the Navigation Bar of the website?
I have the business plan so I am able to code, I just want to have anchor links on the navigation bar.
If you have a video for that or a blog post that would be super helpful.
Thanks so much! :)
Hi Samantha! You can definitely add an anchor link to the navigation using the steps. You'll want to add a link instead of a page to your main navigation and add the url as /pagename#ID1235 Keep in mind this will only work properly when you are previewing the site logged out or in an incognito window. It doesn't always work when you're logged into Squarespace.
Seriously appreciate this! Thank you!
You're so welcome! Glad you found it helpful :D
It worked!! thank you
You're so welcome! Glad you found it helpful!
I have tried adding this code and it does not appear to work. Following your instructions precisely and it looks so simple so I'm at a loss. There is a space between the div and id correct?
Also on the source page I have options (like email and page etc) that aren't in your video. Any suggestions?
You want to choose "web address" and just put in #yoursectionid like that. Let me know if you're still having trouble.
Hey! How do I do anchors to my menu (instead of sperate pages)? Thank you!
If you would like to target a section on the same page you just use a custom link in your menu and add #YOURSECTIONIDNAME for the URL. Hope that helps!
Life savior!
Glad to hear this video helped! Thanks for watching :)
Why are my quotations and word replacing mysection red? I'm having trouble making this work
Typically it's an issue with the syntax. Try copying and pasting from the blog post and making sure you have the right code block. Hope that helps!
I have tried this at least 100 times. I have done it your way (in this video) and I have tried
You want to use "id" instead of "name" the # symbol stands for id. So your link you would put #whereyouwanttogo as the URL and your target section on the same page should be in a code block My blog post may make more sense: localcreative.co/blog/create-anchor-links-in-squarespace/
@@LocalCreative that's what I mean, I have tried both ways. The way you present in this video with
Hi! Is there a way to do this on images? Make the images clickable to jump to a section?
Yes just set your image to have a link and you'll be good to go. This is built into Squarespace already.
Hello,
Thank you for this very useful tutorial!
But I just have one question: The smooth function doesn't work on the home page. Because the first address that appears is a ".com". But the destination path must be a ".com/home#destination". Which is therefore considered to be a new page and cancels the smooth function. Do you have any solution to fix this please? Thank you so much !
It will still work on the homepage. Just link to /#id rather than having /home/#id
You don't need the full url. Just the last part. :)
Hope that helps!
Thank you for this video
You're welcome!
Great, thank you so much!🌻
You are so welcome!
Just what I need
Glad this video helped!
Thanks so much. Have things changed in 2024? I've followed you exactly but it simply won't jump to the right section. I'm pulling my hair out here!
This still works :) I would try following the tutorial again, you may have something missing in your links or code.
Amazing!! TY
You're so welcome!
Is there some code to prevent hte URL from saying #block16373ge7383te.
LÍt looks so ugly and is not SEO friendly
You can use the other method in this video where you create your own code blog and set the ID to be whatever you want :)
This isn't working for me and I cannot figure out why 😒
Try logging out of Squarespace to test or viewing in an incognito window. Hope that helps!
the code is not really working
div id part doesnt register
@@AlessiaApril What are you using as your code. I just tested it yesterday with no issues on a client site :)
are you know how to make anchor link in Google site? please message me how?
That's a completely different ballgame. But it just comes down to knowing the section IDs so you can target them with links.
It works one time and then when I scroll back up and click the link again nothing happens. lol
Hey Jeff. Same here. Works once, on desktop and mobile. Did you manage to find a solution? Cheers
Are you still logged into the Squarespace admin by chance? This should work fine if you are logged out and viewing as a normal visitor would :) Hope that helps!
Good video
Thanks!
thanks!
You're welcome!
@@LocalCreative the anchor buttons work amazing but, for some reason, when I go onto any page that includes the code , it jumps to the bottom of the page by itself without ever pressing any button
Hello, thank you for the video. Anchor links work perfectly except for one Case, in the navigation menu, where I have a dropdown included (services). I have a one-page website (aside from single services with subpages) and a dropdown (named Services) in the navigation panel. I added an anchor link to a particular website section (services). When I click on the "Services" the link doesn't "jump" the section of the website. Instead, the screen goes blank. Other anchor links work; the only one causing problems is this one from the title of the dropdown menu clickable. Can you help me out?
P.S. I used another tutorial in order to make dropdown clickable (ruclips.net/video/fFMVZUoDEYs/видео.html&ab_channel=WillMyers)
Thank you in advance!
I would try adding the full url with the #id at the end vs just the id as the link. Hope that works!
Oh no ....the code again ...i hate it🤣😂i have a code phobia
Hahaha noo! It's really easier than it looks.
amazing! thank you
Of course! Glad it was helpful.