ID not working of in-page linking

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?

Thanks in advance!

Here is my public share link: LINK
(how to access public share link)

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.

As you can see the element its linking to is in the viewport, so the link has nowhere to take you since it’s right there.

@ 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

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'});

@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

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.

@J8kes your genius ideas helped me tremendously and I got it to work.

  • I created an invisible section at the very top of the page.
  • I gave that section and ID: scrolltotopofpage
  • I made it into a component and added it to all of my pages.
  • I linked the ‘back to top’ arrow at the bottom of the page that was in the footer to the that component

and badda bing, badda boom! Lol.

Thank you so much for your help - you have no idea. Really appreciate it.