Hi there! Hoping someone can help me with an issue I’m having. I’m trying to link up the ‘Back to Top’ arrow that I added to the footer component so that when I click it it takes you to the top of the page and unfortunately, the ID that I created called ‘Top-of-page’ is only working on every page EXCEPT the homepage. I’m totally stumped. Any idea how to remedy this?
Hi @db2022 It’s because you’re at the top. The element with the id it’s linking to is the nav, that’s in the hero, that’s sticky, hence, when you scroll down and click on the back to top botton, you are where the link is supposed to go as the nav element it’s linking to is right there, check the screenshot from the designer.
@ J8kes oh my goodness so clever of you to figure that out! Makes total sense! I wonder if there are any workarounds for this problem. I’m thinking it’s likely a very complicated interaction. Maybe best to just remove the ‘top’ button from the homepage all together. Any ideas you might have would be super appreciated! Thanks for your help.
Try this in the project footer code and just link the button to #. Make sure the button ID is: scrollToTopButton
Hard to test without be able to publish, but I’ve used this before
<script>
document.addEventListener("DOMContentLoaded", function() {
// Get the button
var mybutton = document.getElementById("scrollToTopButton");
// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", function() {
window.scrollTo({top: 0, behavior: 'smooth'});
});
});
</script>
@J8kes I’ve placed the code in the site settings custom code footer code area and nothing seems to be happening. Feel free to take a look. If I can’t get this to work, do you know if it’s possible to create a custom class within the footer component so that only the homepage does not have this scroll to top function?
I’m traveling so I can’t look at your readonly at the moment. However you may be able to just move the ID outside of the sticky nav, e.g.
DIV - component wrapper
DIV - ID'd for navigation
DIV - sticky container for nav
NAV..
If not ( i.e. the outer DIV is the sticky ), you could create a separate component containing just the ID’d element, and insert it on all pages just above your Nav component.
If it’s a component, you can make sub-elements of it conditionally visible and controlled by an instance property. That makes it easy to hide that button just on the
To do it, edit your footer component, select the element you want to conditionally hide, and then in the settings pane click the purple button next to visibility. That will allow you to create a new property that’s visibility-specific and bound to that button element.
