Feat: Initiatives by permalink

[machikoyasuda]

closes #353

How to test

• Go to http://localhost:4000/#pills-benefits or http://localhost:4000/#pills-benefits - make sure the page loads to the right tab and page height

- Click around other tabs to make sure the other tabs still also open (but the anchor tag in the URL will not change).

[netlify]

✅ Deploy Preview for cal-itp-website ready!

Name	Link
🔨 Latest commit	c55ee0e
🔍 Latest deploy log	https://app.netlify.com/sites/cal-itp-website/deploys/6695c71a0c6f930008f6672b
😎 Deploy Preview	https://deploy-preview-363--cal-itp-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[machikoyasuda]

This allows the anchor link to scroll an extra 240px (roughly double the height of the top nav), so that the anchor scrolls to here

instead of here:

In this scenario, the Explore the intiatives is hidden by the sticky nav.

[thekaveman]

This is really cool! Works great and the smooth scroll is nice.

One note on testing: this doesn't really work if you have already loaded the page, and then add the #pills-whatever to the URL and hit enter, or change to #pills-whatever2; I don't think this is a real use-case we need to be concerned about. It worked just fine if I entered the URL directly in the browser bar in a blank tab and hit enter (like what would happen if someone clicked a link).

One small request: can we swap the word pills- for something like initiatives- -- if these are going to be URLs that are shared, we want them to sort of make sense and not look weird 😅

[thekaveman]

Very cool 😎

[thekaveman]

cc @indexing we now have direct links to the Initiatives sections on calitp.org