Fix Anchor Links Hidden by Top Navigation

A common issue with anchor links on webpages is that they jump to the top of the page and are often hidden by top navigation. There are multiple ways to solve this problem depending on how you create and format your anchor tags.

Use CSS Only Solution for Empty Anchor Tags

If you are adding anchor tags before elements (they are not surrounding the elements), you can use a CSS only solution to make sure that the anchor jumps to the correct position on the page. Paste this code into Settings > Style > Custom CSS> You can increase or decrease "140px" and "-140px" to change where page jumps.

.hg-article-body a:not([href]) {
  display: block;
  height: 140px; 
  margin-top: -140px; 
  visibility: hidden;

If you use this solution and your anchor tags are actually surrounding your elements, it will cause the elements to be invisible. Use the JavaScript solution instead. 

Use JavaScript Solution for Anchor Tags Wrapping Elements

If your anchors tags wrap around your elements, you can use a JavaScript solution to make sure the anchors display on the correct position of the page. Paste this code into Settings > Style > Custom HTML > Body.  Increase or decrease the "100" in the 5th line to change where the page jumps.

// The function actually applying the offset
function offsetAnchor() {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
// Click events are captured before hashchanges. Timeout
// causes offsetAnchor to be called after the page jump.
window.setTimeout(function() {
}, 0);

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);

This solution was found on StackOverflow.