How to Create Anchor Links in Squarespace with Smooth Scrolling (With & Without Code)
Вставка
- Опубліковано 5 лип 2021
- Grab my free training for web designers: localcreative.co/designers
I'm always looking for ways to make my clients' websites more user-friendly. One of my favorite ways to do this is creating anchor links.
Instead of linking to another page, an anchor link can jump the user down to a particular section of a page, meaning less scrolling on their end. With just a little custom code, you can add endless anchor links and make your long-scroll pages easier to navigate.
Can't use custom CSS? No problem! At the end of the video, I'll show you a workaround that involves zero custom CSS. It's a great option for the code-averse and anyone using the personal Squarespace plan.
Visit the blog to copy and paste the exact code I used in this tutorial: localcreative.co/blog/create-...
// FAVORITE TOOLS
ConvertKit for Email Marketing: localcreative.co/convertkit
Circle for Hosting My Online Community: localcreative.co/circle
HoneyBook for Client Management (50% Off): localcreative.co/honeybook
Showit for Web Design (Get 1 Month Free): localcreative.co/showit
Squarespace for Web Design (Code: PARTNER10) localcreative.co/squarespace
Podia for Selling Digital Products & Courses: localcreative.co/podia
Canva for Graphic Design: localcreative.co/canva
Planoly for Scheduling Social Posts: localcreative.co/planoly
Loom for Screen Recording: localcreative.co/loom
// MY UA-cam VIDEO SETUP
All the gear I use to make these videos: a.co/9spYRsB
Descript for Video Editing: localcreative.co/edit
Ecamm Live for Recording to My Computer: localcreative.co/ecamm
// FOLLOW ALONG
Website: localcreative.co/
Instagram: / localcreative.co
Facebook Page: / localcreativeco
I may receive a small commission if you sign up for any of these tools/apps using the links here, but I only share because I personally use and highly recommend these products.
// SHOP OUR COURSES AND WORKSHOPS
bit.ly/3s5jKEv
Music by Penny Lane / You Me / Courtesy of Epidemic Sound
localcreative.co/epidemicsound - Наука та технологія
![How to Create Anchor Links in Squarespace [4-minute Guide]](/img/n.gif)
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.
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.
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!
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!
So incredibly helpful! You made this so easy to do, thank you!
Glad to hear it!!
The id finder is way too easy and convenient! Thanks so much!!!
Right!? Such a simple way to make it work!
Amazing video! Super easy to follow and concise :) Thank you!!
Thank you!
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 :)
Best Explanation! Clear and Easy Instructions!
Glad it was helpful! Thanks for letting me know!
Your video has saved me so many times! Thank you!
I'm so glad! Thanks for sharing :D
This was super helpful thank you so much. I can’t get the smooth scroll to work though. Is there an update?
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!
Used it. The smoothing css is a big bonus!
Right?! It looks so professional.
Exactly what is was looking for, thank you!
Glad I could help! Thanks for taking the time to leave a comment!
such a well explained video, thank you for your help.
You're very welcome!
This video was so helpful. Thank you so much!!!!!!!!!!!!!!
I'm so glad! Thanks for watching.
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!
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.
SUPER HELPFUL!!! Thank you so much!
You're welcome! Thanks for watching!
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 :)
Worked perfectly! Thank you!
Great to hear! Thanks for letting me know :D
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!
Great video, to the point, and perfectly explained, Thank you!!
Glad it was helpful! Thanks for leaving a comment. Really appreciate it!
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.
Great easy to follow explanations. thank you
Thanks for letting me know!
This is a game changer. Thank you!!!
So glad to hear it!!
So helpful!!! Thank you so much!
So glad! Thanks for commenting to let me know.
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!
It worked!! thank you
You're so welcome! Glad you found it helpful!
Seriously appreciate this! Thank you!
You're so welcome! Glad you found it helpful :D
Thank you so much - love ya lots for this solution!
You're so so welcome :D
Thanks! It was super helpful
Glad it helped! Thanks for watching and leaving a comment!
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.
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 excellently ... thanks a lot :)
You're welcome! Thanks for letting me know :D
God bless you, it's really helpful and very easy to do
It's my pleasure! Thanks for watching.
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.
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 :)
Amazing!! TY
Thank you for this video
You're welcome!
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!
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.
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 :)
amazing! thank you
Of course! Glad it was helpful.
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 :)
Thanks was very helpful to me
Glad to hear it! Thanks for sharing!
Great, thank you so much!🌻
You are so welcome!
Life savior!
Glad to hear this video helped! Thanks for watching :)
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.
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.
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.
great video thank you. I would turn the background volume down a bit but that's all
:)
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
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.
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 :)
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!
Thanks! should have started with the last part first lol
Next time! Thanks for the feedback.
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.
Im trying to link a galley picture to a section of a page but pages are not indexed to show section pages …
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 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.
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 :)
Can you do this tutorial for Squarespace 7.1
This still works in Squarespace 7.1 :)
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!
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!
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.
Good video
Thanks!
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 :)
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.
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
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 :)
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
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.
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.
This isn't working for me and I cannot figure out why 😒
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 :)
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!
Oh no ....the code again ...i hate it🤣😂i have a code phobia
Hahaha noo! It's really easier than it looks.