Perfect Anchor Links in Squarespace (No Header Overlapping)
HTML-код
- Опубликовано: 16 сен 2024
- In this tutorial, I’ll show you how to build anchor links so that your header doesn’t cover the text you’re scrolling to. In this example, I’ll build a table of contents for a blog post.
Article: www.will-myers...
Timestamps
0:38 - Creating Anchor Links
4:52 - Smooth Scroll Anchor Links
5:35 - Anchor Links without Text
6:54 - Fixing the Header Overlap Problem
The Issue
Anchor links will often overlap the content we want to be visible with our header.
The Solution
The solution here is actually quite simple. Using the scroll-margin property, we can offset where the anchor links scrolls too! However, we need to target the anchor that we’re scrolling too.
Newsletter: www.will-myers...
Buy Me A Coffee: www.buymeacoff...
Plugin Store: www.will-myers... 
Наука
![How to Create Anchor Links in Squarespace [4-minute Guide]](/img/1.gif)
Thank you for explaining this so well! Really helped me out
Thanks for your video, excellent and clear instructions
Thank you! I just created my first anchors. That was so easy!
Worked great, thank you.
Thank you so much bro, the last code really helped me
This is awesome!
Thanks, this is just what I needed to know. Works perfectly :)
Bro 🙌 exactly what I needed
Great tutorial!
Very helpful, thank you!👌
Hey, thanks so much for this! What would be the fix for mobile? Currently it's overshooting since screen is smaller. 200px is too much for mobile
Hey, you could use media queries to target different screen sizes and adjust the scroll-margin property on these.
perfect, thank you !
Hello Will, Can you show us on how did you manage to prevent the #intro from popping up in the URL after clicking the anchor?
Im wondering this too...
Hey, unfortunately I don't believe this is possible.
This was a great help thanks, been wrestling with this problem for a while. Is there a way of underlining the text by any chance?
Hey James, you'll just need a bit of CSS to do this. Reach out via our Support Page and point us towards what you want underlined and we can provide this for you.
LOVE this video. I'd give you 100 👍👍👍 if I could, you deserve it! Thank you very much for sharing!
If anyone's having the issue where it doesn't properly go the section and does a weird jumpy thing after you've already clicked one of your anchor buttons, add your full URL before the #anchor in your button link, fixed it up for me!
Edit: make sure you have open in new window switched off
how can you do this with a button? Say a "get started button" that when clicked would jump to the contact form on the page?
Hey Sean, you'd set it up much like we do in the tutorial, but you'd add the #id as the link within the button rather than a linked piece of text.
Can you show us how to keep the table of contents box at the right of the screen always visible even when you've clicked down lower on the page?
Hey Jake, Will's got a video on this - ruclips.net/video/1KC_98g-YIY/видео.html
Hi Will still having problems with anchor link. I am trying to add an anchor link to my three location on my service page, but its not working. From my home page I have a Service page link in my navigation menu. that have three locations on my Service page that I want to add an anchor to each location. I would like to click Service and choose the location name and have it go to the location on the Service page. Boy that was difficult to explain. I hope you can help with this. Let me know. Thanks, Will.
Hey George, if you can reach out via the Support page on our website we can take a closer look at this for you.
is it possible to pin the table of contents so when you scroll, it's always visible on the page?
Hey, have you checked out Squarespace's new pinning feature?
Hey, thank you for this great video. Unfortunately i am having problems at the mobile version, where on mobile when click on the link and it hops to the anchor, when i want to scroll down further it always hops up again to where the link is.. anyone having this problem as well?
yes i am having the same problem. Any fix on this would be fantastic. I have tried different methods but having no luck. please let me know if you find a solution
Hey, if you reach out via the Support page on our site we can troubleshoot this for you.
@@will-myers Alright thank you so much. I just reached out at your Support page.
Heyy, it works perfectly... But after using it once and if I scroll back to top of the page... I was unable to use this trigger again... How can we fix this issue?
Hey Santosh, this should only be the case in the editor, when viewing it on a live site you can click it numerous times.
I got the effect to work, but it doesn't allow the button to be clicked twice without refreshing the page. If someone were to scroll up to the top again, then click the same link it wont scroll them back down without a website refresh. Do you know why that happens?
Hey, we believe this to only happen in the back end, when viewing the live site does it work?
Hi Will, just a heads up - I contacted you on your site about one of your plugins. When it sent, your site read that I would receive a ticket in my email. I didn't receive a ticket so I'm just following up here. If you didn't receive a message about a plugin yesterday, let me know. Thanks -
Hey Ramsey, not sure why the auto-response didn't work, but don't worry, I did receive the support ticket. We'll get you a response on Monday!
the hashtag link really isnt working for me
Hey, if you'd like to reach out via the Support page on our site we can take a look.