#Issues with a page close button

8 messages · Page 1 of 1 (latest)

split vine
#

Hi, I have a close button component as follows:

---
// TODO: Using ../ as a path for the close button works in production but not dev
// TODO: Using the close button does not restore scroll position when navigating backwards

interface Props {
  path: string;
}
---

<a href={Astro.props.path} style="
  position: fixed;
  top: 0.4rem;
  right: 0.4rem;
  padding: 0.2rem;
  background: #eee;
  z-index: 5;
">Close</a>

However, as listed the close button has a few problems:

  1. It does not restore the scroll position of the page when the user goes back
  2. Using ../ as the path attribute for the close button will navigate to the page in the parent directory of the current page for production mode, but not dev mode

How would I go about fixing these issues?

reef estuaryBOT
#

Hi @split vine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the knowledge sources provided, there are a few potential solutions to your issues:

  1. Restoring Scroll Position: There is a Github issue (https://github.com/withastro/astro/issues/7847) that discusses a similar problem. The user suggests adding the scrollTop into the history.state to restore the scroll position when navigating backwards. However, this issue is not resolved yet, so there might not be a built-in solution in Astro at the moment. You might need to implement a custom solution using JavaScript to store the scroll position before navigating away and restore it when navigating back.

  2. Path Issue in Dev Mode: There is another Github issue (https://github.com/withastro/astro/issues/1211) that discusses a similar problem with Astro.resolve(). The issue suggests that the resolver runs relative to the page and not the component, which might be causing your issue. However, this issue is also not resolved yet. As a workaround, you might need to use absolute paths instead of relative paths, or adjust your project structure to avoid the need for ../ in the path.

Please note that these are potential solutions based on the provided knowledge sources and might not work in your specific case. If you continue to experience issues, I would recommend raising an issue in the Astro Github repository or asking for help in the Astro community.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@split vine kapa.ai is still learning and improving, please let us know how it did by reacting below

split vine
#

@reef estuary I have a potential idea of how to handle the scroll restoration; look at the URL to the previous page, and if it matches the URl that we want to travel to, then use the history.back() function. If the URL does not match, then just navigate to the other page by setting the window.location property. How would I implement this, specefically the part where the previous URL is recalled, and it is tested to see if it matches the URL that we want to go to.

reef estuaryBOT
#

Let me check the knowledge base for you. One moment! :books:

#

To implement this, you would need to use the document.referrer property, which returns the URI of the page that linked to the current page. You can compare this with the URL you want to navigate to. Here's a basic example of how you could implement this:

let previousUrl = document.referrer;
let targetUrl = 'your_target_url_here';

if (previousUrl === targetUrl) {
  history.back();
} else {
  window.location.href = targetUrl;
}

Please note that document.referrer might not always work as expected, especially if the user navigated to the page directly (e.g., by typing the URL into the address bar) or in some privacy settings. Also, this method does not account for the scroll position on the previous page. You would need to handle that separately.

Remember to replace 'your_target_url_here' with the actual URL you want to navigate to.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@split vine kapa.ai is still learning and improving, please let us know how it did by reacting below