edgeOffset has no effect with anchor link from other page

[davidluhr]

When I navigate to a new page with a URL containing an anchor (example.com/about/#team), the anchor loads at the very top edge of the browser (browser default behavior) and the value in edgeOffset does not take effect.

To compensate this, I've implemented the traditional CSS offset:

:target:before
  content: ""
  display: block
  height: 8.5rem
  margin-top: -8.5rem

This fixes the issue explained above, but with one caveat. If navigate to this new page, the anchor is properly offset with this CSS declaration, but if I click any other anchors on that same page, ZenScroll adds edgeOffset to this CSS offset, thereby doubling the desired distance.

Obviously, this is a result of both the CSS delcaration and ZenScroll doing their assigned duties perfectly, but if there's a way to configure ZenScroll to offset the screen when navigating to an anchor from another page, that would be wonderful.

Thanks for any help!

[zengabor]

Can you try a little script like the one below, on page load (after zenscroll has been loaded):

if (window.location.hash) {
  var targetElem = document.getElementById(window.location.hash.substring(1))
  if (targetElem) {
    zenscroll.to(targetElem)
  }
}

Never tried but this should make the animated adjustment after page load if there is a hash in the URL.

In this case you would not have the issue with the CSS margin.

[zengabor]

Note that zenscroll could execute the above lines during initialization but what if you wanted to customize the offset? So that's a no-go.

But maybe an adjustment function could be invoked after an optional config, like:

zenscroll.config(null, 25)
zenscroll.adjust()

Not sure.

[zengabor]

This is now implemented in the 4.0 release candidate, which you can find here at the moment: https://github.com/zengabor/zenscroll/tree/gh-pages

Would you mind testing it?