How to Create Anchor Links in Squarespace with Smooth Scrolling (With & Without Code)
HTML-код
- Опубликовано: 30 ноя 2024
- Grab my free training for web designers: localcreative....
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....
// FAVORITE TOOLS
ConvertKit for Email Marketing: localcreative....
Circle for Hosting My Online Community: localcreative....
HoneyBook for Client Management (50% Off): localcreative....
Showit for Web Design (Get 1 Month Free): localcreative....
Squarespace for Web Design (Code: PARTNER10) localcreative....
Podia for Selling Digital Products & Courses: localcreative....
Canva for Graphic Design: localcreative....
Planoly for Scheduling Social Posts: localcreative....
Loom for Screen Recording: localcreative....
// MY RUclips VIDEO SETUP
All the gear I use to make these videos: a.co/9spYRsB
Descript for Video Editing: localcreative....
Ecamm Live for Recording to My Computer: localcreative....
// 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....
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!
The id finder is way too easy and convenient! Thanks so much!!!
Right!? Such a simple way to make it work!
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 :)
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!
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)
This even worked for me without Business Plan, very helpful thanks!!
Fantastic!
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 :)
I could literally cry! Thank you!!!!
You're SO welcome!!
So incredibly helpful! You made this so easy to do, thank you!
Glad to hear it!!
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.
Amazing video! Super easy to follow and concise :) Thank you!!
Thank you!
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 :)
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!
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!
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?
It should still work! I would try checking when you're logged out of 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" :)
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.
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 :)
This was great, thanks! The smooth scrolling should have been a standard option. :)
Right?! Agreed.
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!
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.
such a well explained video, thank you for your help.
You're very welcome!
great video thank you. I would turn the background volume down a bit but that's all
:)
Thanks. :)
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!
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 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.
This video was so helpful. Thank you so much!!!!!!!!!!!!!!
I'm so glad! 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.
Thanks! should have started with the last part first lol
Next time! Thanks for the feedback.
God bless you, it's really helpful and very easy to do
It's my pleasure! Thanks for watching.
great video and thank you for making it simple (unliked the Squarespace help page)
Glad it helped! Thanks for taking the time to comment :)
Exactly what is was looking for, thank you!
Glad I could help! Thanks for taking the time to leave a comment!
Thanks was very helpful to me
Glad to hear it! Thanks for sharing!
Thank you very very useful!!!
Great easy to follow explanations. thank you
Thanks for letting me know!
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 :)
SUPER HELPFUL!!! Thank you so much!
You're welcome! Thanks for watching!
Worked perfectly! Thank you!
Great to hear! Thanks for letting me know :D
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!
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!
Can you do this tutorial for Squarespace 7.1
This still works in Squarespace 7.1 :)
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.
Thank you so much - love ya lots for this solution!
You're so so welcome :D
Just what I need
Glad this video helped!
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.
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 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.
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.
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.
So helpful!!! Thank you so much!
So glad! Thanks for commenting to let me know.
Thanks! It was super helpful
Glad it helped! Thanks for watching and leaving a comment!
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.
Life savior!
Glad to hear this video helped! Thanks for watching :)
Thank you for this video
You're welcome!
worked excellently ... thanks a lot :)
You're welcome! Thanks for letting me know :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. :)
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!
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 :)
Great, thank you so much!🌻
You are so welcome!
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 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.
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.
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 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 :)
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!
It worked!! thank you
You're so welcome! Glad you found it helpful!
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.
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.
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
Great video, to the point, and perfectly explained, Thank you!!
Glad it was helpful! Thanks for leaving a comment. Really appreciate it!
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!
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.
Seriously appreciate this! Thank you!
You're so welcome! Glad you found it helpful :D
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 :)
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
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!
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.