Perfect Anchor Links in Squarespace (No Header Overlapping)
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: https://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: https://www.will-myers.com/newsletter
Buy Me A Coffee: https://www.buymeacoffee.com/willmyers
Plugin Store: https://www.will-myers.com/products
Watch video Perfect Anchor Links in Squarespace (No Header Overlapping) online without registration, duration hours minute second in high quality. This video was added by user Will Myers 10 August 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,187 once and liked it 169 people.