URL Anchors

The page might contains links using URL anchors which would tell the browser to scroll to a content on the page. Highway manage those URL anchors depending on the URL structure.

Same Page

The links to the same page with anchors won't trigger transitions. The default browser behavior will be used instead to scroll to the right content on the page.

<!-- File: index.html -->
<!-- Link to the same page but with an anchor won't trigger the transition -->
<a href="#anchor"></a>

Try me

Other Pages

The links to other pages with anchors are going to be handled by Highway like it should normally do because with or without parameters the URLs are staying different from each other so transitions are required and are triggered by the links.

<!-- File: index.html -->
<!-- Link to other pages but with an anchor will trigger the transition -->
<a href="path/to/page#anchor"></a>

Try me

However for links to other pages with an anchor the scroll to the right content on the page needs to be handled programmatically in Javascript using Highway events. The NAVIGATE_END event fits perfectly for this kind of behavior.

// File: main.js
const H = new Highway.Core();

// Listen the `NAVIGATE_END` event
// This event is sent everytime the `done()` method is called in the `in()` method of a transition
H.on('NAVIGATE_END', ({ location }) => {
  // Check Anchor
  if (location.anchor) {
    // Get element
    const el = document.querySelector(location.anchor);

    if (el) {
      // Scroll to element
      window.scrollTo(el.offsetLeft, el.offsetTop);
    }
  }
});