Id:s that start with a number aren't navigable

[dhakan-k]

Description

When an id starts with a number, like an element with id="1-Sign-Up-to-create-the-User", it crashes when trying to be scrolled to.

Steps to reproduce

Apply gatsby-plugin-anchor-links on a Gatsby website with an anchor link.

In my setup I use gatsby-plugin-mdx with gatsby-remark-autolink-headers to generate the id:s and links, but I'm positive any page with an id value that starts with a number will suffice.

Expected result

The id should be scrolled to successfully.

Actual result

It crashes on:

Uncaught DOMException: Document.querySelector: '1-Sign-Up-to-create-the-User' is not a valid selector

because of the dependency of this package, https://github.com/willhoag/scroll-to-element.

Environment

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 4.4.23 - /nix/store/idf48ng7jlz9jrmv0c2bkj0i3xxbdhrp-bash-interactive-4.4-p23/bin/bash
  Binaries:
    Node: 12.18.4 - /nix/store/lcr10m9cfdm1qpd0kzjgb2iy8mmxcjjc-nodejs-12.18.4/bin/node
    Yarn: 1.22.5 - /nix/store/0dbynkravj7lixj5mg19vmaxgdxsp5wm-yarn-1.22.5/bin/yarn
    npm: 6.14.6 - /nix/store/lcr10m9cfdm1qpd0kzjgb2iy8mmxcjjc-nodejs-12.18.4/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 88.0.4324.150
    Safari: 14.0.3
  npmPackages:
    gatsby: ^2.29.0 => 2.29.1
    gatsby-background-image: ^1.1.2 => 1.1.2
    gatsby-image: ^2.2.34 => 2.4.6
    gatsby-plugin-anchor-links: ^1.1.1 => 1.1.1
    gatsby-plugin-google-analytics: ^2.3.13 => 2.3.13
    gatsby-plugin-local-search: ^1.1.1 => 1.1.1
    gatsby-plugin-manifest: ^2.2.31 => 2.4.10
    gatsby-plugin-mdx: ^1.2.5 => 1.2.14
    gatsby-plugin-offline: ^3.0.27 => 3.2.8
    gatsby-plugin-postcss: ^2.3.1 => 2.3.3
    gatsby-plugin-react-helmet: ^3.1.16 => 3.3.3
    gatsby-plugin-sass: ^2.3.14 => 2.3.14
    gatsby-plugin-sharp: ^2.3.5 => 2.6.10
    gatsby-plugin-sitemap: ^2.4.12 => 2.4.12
    gatsby-remark-autolink-headers: ^2.3.2 => 2.3.4
    gatsby-remark-embed-markdown: https://github.com/dhakan-k/gatsby-remark-embed-markdown => 0.0.4
    gatsby-source-filesystem: ^2.1.40 => 2.3.10
    gatsby-source-git: ^1.1.0 => 1.1.0
    gatsby-transformer-sharp: ^2.3.7 => 2.5.4
    gatsby-transformer-yaml: ^2.4.0 => 2.4.3

[dhakan-k]

Opened a ticket in the dependency repo: willhoag/scroll-to-element#14

[buondevid]

I encountered the same problem: the website crashes if the heading is starting with a number and you want to navigate to it. The problem looks to be inside the dependency "scroll to element".