question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Navigating to anchor tag on same page?

See original GitHub issue

Expected behavior

Clicking on a link <a href="#f" rel="noopener noreferrer">Fa> should navigate to <section id="f" section> further down the page.

Actual behavior

Clicking on a link <a href="#f" rel="noopener noreferrer">F</a> navigates to 404

Steps to reproduce behavior

Repo here: anchor-test git clone npm i navigate to localhost:8080 and click link on top of page that reads “Go to F” (I’m not not telling you to go to F 😄).

I’ve tried commenting out the catch-all route in index.js and that yields a console error: Error: route '/f' did not match So it looks like for some reason the # in the href is being disregarded?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
tornqvistcommented, May 24, 2018

I’ll close this for now, let me know if you’re still having any issues and I’ll reopen it.

1reaction
tornqvistcommented, May 18, 2018

Don’t forget to also call event.preventDefault() to stop choo from handling the click and issuing a rerender and trying to scroll the anchor into view. Might be what is causing the jump on first click.

If that is the case it’d be this line here that causes the jump: https://github.com/choojs/choo/blob/master/index.js#L104

Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML5 Navigation: How to Use Anchor Tags for Hypertext
HTML anchor tags create a hyperlink to other web pages and locations within the same page. Learn more with our tutorial.
Read more >
How to Add an Anchor Link to Jump to a Specific Part of a Page
A named anchor can be used to link to a different part of the same page (like quickly navigating) or to a specific...
Read more >
How to Create a Link to Jump to a Specific Part of a Page ...
2. Take the name you've chosen, and insert it into an opening HTML anchor link tag. · 3. Place that complete opening <a>...
Read more >
How to make an HTML anchor link jump to a specific part of ...
You can use anchor ( <a> ) links in HTML to link to a different page or a different website. But how can...
Read more >
How to create links to sections on the same page in HTML
This method is similar to using "id," but you don't have to pick a specific element. Click "Top" or "Bottom" in the Results...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found