Skip to content

Support for in/inter page linking / scrolling with hashes in EmberJS

License

Notifications You must be signed in to change notification settings

CrowdStrike/ember-url-hash-polyfill

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

55ab1b0 · Nov 7, 2023
May 10, 2023
May 3, 2023
Apr 21, 2021
May 4, 2023
May 3, 2023
Apr 22, 2021
Apr 21, 2021
Apr 21, 2021
Apr 21, 2021
Apr 21, 2021
Apr 22, 2021
Apr 21, 2021
Apr 21, 2021
Apr 21, 2021
Apr 21, 2021
Apr 21, 2021
May 3, 2023
Apr 21, 2021
May 11, 2023
Apr 21, 2021
Apr 21, 2021
May 3, 2023
Apr 22, 2021
Apr 21, 2021
Nov 7, 2023
Apr 21, 2021
Apr 22, 2021
Nov 7, 2023

Repository files navigation

ember-url-hash-polyfill

Navigating to URLs with #hash-targets in them is not supported by most single-page-app frameworks due to the async rendering nature of modern web apps -- the browser can't scroll to a #hash-target on page load / transition because the element hasn't rendered yet. There is an issue about this for Ember here on the RFCs repo.

This addon provides a way to support the behavior that is in normally native to browsers where an anchor tag with href="#some-id-or-name" would scroll down the page when clicked.

Installation

yarn add ember-url-hash-polyfill
# or
npm install ember-url-hash-polyfill
# or
ember install ember-url-hash-polyfill

Compatibility

  • Ember.js v3.25 or above
  • Node.js v14 or above

Usage

To handle /some-url/#hash-targets on page load and after normal route transitions,

  // app/router.js

  import { withHashSupport } from 'ember-url-hash-polyfill';

+ @withHashSupport
  export default class Router extends EmberRouter {
    location = config.locationType;
    rootURL = config.rootURL;
  }

Additionally, there is a scrollToHash helper if manual invocation is desired.

import { scrollToHash } from 'ember-url-hash-polyfill';

// ...

scrollToHash('some-element-id-or-name');

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.