Link to MetaMask API Method expands but doesn't scroll to

Open
#73 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
52/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
frontend

Research direction

Open the API Playground link for eth_chainId and inspect the API documentation entry and its anchor-link handling. Trace how the URL hash expands a method, then verify that navigation also scrolls the expanded section into view. Done means links such as #eth_chainId both expand the method and bring it visibly into the viewport.

Written by the indexing model from the issue text.

Description

When navigating to the MetaMask API Playground using an anchor link of one of the API methods does expand the section, but does not scroll to that section. Therefore when trying to link from (for instance) documentation or blog articles, if the method is beyond the fold (bottom of the screen) the user may feel that they have not navigated correctly and will have to scroll on their own.

A good example of this is a method we like to link to a lot from various places:
eth_chainId

The purpose of this issue is to add the functionality needed, which could be something like:

if (window.location.hash) {
      // Extract the anchor point from the URL
      const anchor = window.location.hash.substr(1);

      // Scroll to the anchor point on the page
      window.scrollTo({
        top: document.getElementById(anchor).offsetTop,
        behavior: 'smooth'
      });
    }

Something like that.

Dominant language
TypeScript
Stars
7
Forks
8
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from MetaMask/api-playground

All issues in MetaMask/api-playground

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.