←back to thread

Overengineered Anchor Links

(thirty-five.com)
392 points matser | 3 comments | | HN request time: 0.6s | source
1. awayto ◴[] No.43571043[source]
I dabbled with this kind of issue in my docs and ended up using JavaScript's Intersection Observer [0]. It's not a perfect solution [1], but I think it worked well enough [2]. It just identifies when the element comes on screen and then marks it as active however you please. I do appreciate the depth the article went into though!

[0] https://developer.mozilla.org/en-US/docs/Web/API/Intersectio... [1] https://github.com/keybittech/awayto-v3/blob/main/landing/la... [2] https://awayto.dev/docs/0.3.0/

replies(2): >>43571808 #>>43586223 #
2. ruduhudi ◴[] No.43571808[source]
This is by far the best solution. Super simple and covers all those issues.
3. mason55 ◴[] No.43586223[source]
FYI - you aren't handling the "scroll up" case.

To see what I mean, click "Creating a Feature" then start scrolling up. Notice that "Creating a Feature" is still highlighted even though the entire screen is made up of text from the "Software" section.

I probably only noticed this because I recently implemented a similar "active anchor" solution with Intersection Observer.