Perfect Anchor Links in Squarespace (No Header Overlapping)

Подписаться 4,5 тыс.

Просмотров 6 тыс.

50% 1

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.com/articles/p...
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.com/newsletter
Buy Me A Coffee: www.buymeacoffee.com/willmyers
Plugin Store: www.will-myers.com/products

Наука

Опубликовано:

9 авг 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 36

@mvelentzas Год назад

Thank you for explaining this so well! Really helped me out

@flairmagic8502 5 месяцев назад

Thanks for your video, excellent and clear instructions

@nathanjamesparker Год назад

Worked great, thank you.

@Catherine_Just 9 месяцев назад

Thank you! I just created my first anchors. That was so easy!

@tracywickham8098 9 месяцев назад

Thanks, this is just what I needed to know. Works perfectly :)

@didondidon Месяц назад

perfect, thank you !

@smartmywayag9935 Год назад

Very helpful, thank you!👌

@minxueeecaroon 8 месяцев назад

Thank you so much bro, the last code really helped me

@user-nc7bt6cb7m Год назад

This is awesome!

@SamSulekQuotes Год назад

Bro 🙌 exactly what I needed

@markus19990316 10 месяцев назад

Great tutorial!

@miserytakeme 4 месяца назад

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

@chenzhou876 10 месяцев назад

LOVE this video. I'd give you 100 👍👍👍 if I could, you deserve it! Thank you very much for sharing!

@reck1esscxv Год назад

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?

@SjoerdWess Год назад

Im wondering this too...

@abi-at-WillMyersSupport Год назад

Hey, unfortunately I don't believe this is possible.

@Bendoodbro 7 месяцев назад

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

@abi-at-WillMyersSupport 7 месяцев назад

Hey, you could use media queries to target different screen sizes and adjust the scroll-margin property on these.

@TheSnowboarderJake Год назад

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?

@abi-at-WillMyersSupport Год назад

Hey Jake, Will's got a video on this - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-1KC_98g-YIY.html

@santosh_mudragada 11 месяцев назад

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?

@abi-at-WillMyersSupport 11 месяцев назад

Hey Santosh, this should only be the case in the editor, when viewing it on a live site you can click it numerous times.

@Rustic_Potato Год назад

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?

@abi-at-WillMyersSupport Год назад

Hey, we believe this to only happen in the back end, when viewing the live site does it work?

@oKathiio 3 месяца назад

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?

@BookMyWeddingBand 3 месяца назад

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

@will-myers 3 месяца назад

Hey, if you reach out via the Support page on our site we can troubleshoot this for you.

@oKathiio 3 месяца назад

@@will-myers Alright thank you so much. I just reached out at your Support page.

@seanpitts792 5 месяцев назад

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?

@abi-at-WillMyersSupport 5 месяцев назад

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.

@GeorgeS.Thompson Месяц назад

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.

@will-myers 26 дней назад

Hey George, if you can reach out via the Support page on our website we can take a closer look at this for you.

@ItsTheQs Год назад

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 -

@will-myers Год назад

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!