Issue with Automatic Scrolling to Section on Page Refresh or Revisit
Dear Metronic Support Team,
I am encountering an issue with my project using Metronic 8. I have an anchor link in my page with href="#overview" that is supposed to scroll the page to the corresponding section when clicked. The link works correctly in the current session, but when the page is refreshed or revisited, the page does not automatically scroll to the #overview section as expected.
Details:
Metronic Version: 8.2.7
Description of Issue:
I have a link with href="#overview". When the user clicks this link, the page scrolls to the appropriate section.
However, when the page is refreshed or reopened later (with the #overview still in the URL), the page does not scroll to the specified section automatically.
I would like the page to automatically scroll to the #overview section whenever the page is loaded with that hash in the URL, even after a refresh or revisit.
Steps to Reproduce:
Add a link with href="#overview" to the page.
Click the link to scroll to the #overview section.
Refresh the page or revisit the page with the URL containing #overview.
Observe that the page does not automatically scroll to the #overview section.
Expected Behavior:
The page should automatically scroll to the #overview section when the page is refreshed or revisited with #overview in the URL.
Additional Information:
I've ensured that my routing and link generation are configured correctly.
I attempted using JavaScript to force the scroll on page load, but I would like to know if there is a built-in way in Metronic 8 to handle this scenario more effectively.
Could you please provide guidance on how to ensure that the page automatically scrolls to the specified section on refresh or revisit? Any insights or recommended solutions would be greatly appreciated.
Thank you for your assistance.
Replies (2)
Hi,
To implement the feature you need you can use the below workaround:
<script>
// Function to get the decoded hash from the URL
function getDecodedHash() {
const hash = window.location.hash.substring(1); // Removes the leading "#"
return decodeURIComponent(hash);
}
// Function to scroll to the section based on the decoded hash
function scrollToSection() {
const decodedHash = getDecodedHash();
if (decodedHash) {
const element = document.getElementById(decodedHash);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
}
}
// Scroll to the section when the page loads
window.addEventListener("load", scrollToSection);
// Scroll to the section when the hash changes
window.addEventListener("hashchange", scrollToSection);
</script>Regards,
Sean
Hi,
Thank you for your feedback. Let us check this further and we will get back to you with a solution asap.
Regards.
