Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG] Update location fragment on smooth scroll anchor link clicks #202

Closed
jrysana opened this issue Jul 9, 2023 · 4 comments
Closed

[BUG] Update location fragment on smooth scroll anchor link clicks #202

jrysana opened this issue Jul 9, 2023 · 4 comments
Labels
bug Something isn't working

Comments

@jrysana
Copy link
Contributor

jrysana commented Jul 9, 2023

Describe the bug
Per #201, smooth scrolling anchor links on the landing page should actually update the fragment in the URL bar when you click them on the landing page. Currently, they don't, because we prevent the default behavior of the Link (anchor tag wrapper) when on the same page to allow JS to smoothly scroll reliably to the anchor.

To Reproduce
Steps to reproduce the behavior:

  • Try clicking around the navbar on the landing page

Expected behavior
A clear and concise description of what you expected to happen.

  • Browser URL bar fragment should update to the corresponding id when you click on the navbar links

Additional context
Add any other context about the problem here.

  • It might make sense to do a custom wrapper around Next's Link component to facilitate automatic smooth scrolling on same-page anchor links.
@jrysana jrysana added the bug Something isn't working label Jul 9, 2023
@jrysana jrysana changed the title [BUG] [BUG] Update location fragment on smooth scroll anchor link clicks Jul 9, 2023
@swapn652
Copy link

swapn652 commented Jul 9, 2023

Hey, can I work on this?

@ajitzero
Copy link
Contributor

I just noticed this issue myself and came to raise it. Here's a CSS-only fix that works in most browsers for whoever picks it up:

  • Update the HTML tag to use smooth scrolling via CSS.
    • Recommended: Update in global styles: html { @apply smooth-scroll; }
    • OR: <html class="smooth-scroll"> but in the Next Html equivalent.
  • Update the Link component to disable Next's scroll default behavior: <Link scroll={false} {...otherProps}>

Here's a related StackOverflow question for the history behind this issue: https://stackoverflow.com/a/74084483

Unfortunately, I won't be able to help this week as I've got a lot on my plate. If nobody else volunteers, I am happy to take this up in the coming week.

@Sparsh-Malhotra
Copy link

Hey @jrysana I would love to take this issue and contribute to the repository. Please assign it to me

@keshav-gupta19
Copy link

Could you please assign it to me?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@ajitzero @ixahmedxi @jrysana @swapn652 @Sparsh-Malhotra @keshav-gupta19