Anchor links scrolling under static topbar

[vegasgeek]

Background
On sites where the top bar has been set to remain static at the top of the page, if you try to use an anchor link to content further down the page, the content scrolls to the top of the screen and is hidden behind the top bar.

Scenario

As a visitor to a site with a static top bar;

• when I click a link to an anchor on a page
• I see the content scroll to the top of the screen,
• and the desired content is displayed starting just under the top bar

[vegasgeek]

Laura found this handy bit of code:
https://pjbrunet.com/wordpress-link-anchors-scrolling-too-far-under-your-navbar/

I did some preliminary tests and it worked well. I'm going to bake it into the default theme.

[vegasgeek]

I added [https://github.com/revelrylabs/wp-harmonium/tree/14-anchor-links-scolling-under-topbar](this branch) and did some testing. The script is "working", but also acting a little weird.

To test, do the following:

• grab [https://github.com/revelrylabs/wp-harmonium/tree/14-anchor-links-scolling-under-topbar](this branch)
• edit _header.scss to add "position: fixed" and "z-index: 10" to the .site-header class.
• run 'gulp' from the command line
• add an anchor ID to the middle of a page
• Add a link to the anchor ID

My results are as follows:

• The first time I click the link, it scrolls the anchor to the top of the page under the header (i.e. hidden behind the header)
• If I then scroll back up to the link and click it a second time, the page scrolls to the anchor and it stops just below the header as expected/intended. (i.e. not hidden behind the header)