Streaming live at 10am (PST)

Creating a universal back-to-top button between footer and header?

Hi there,

I’m trying to add a ‘back to top’ button on the bottom of every page in a site. To avoid having to create this button uniquely on every page I’ve designed it to live inside my Footer symbol. And since my Header symbol also appears on every page, I figured it would make sense to ID the header and do a same-page link from the footer, so the button would work on every page.

However, it’s not working and I can’t figure out why. When I give the Header symbol an ID, the ID name doesn’t show up in the drop-down list of sections I can link to on that page, like it just hasn’t registered the ID at all. I do have an element INSIDE the symbol ID’d, which DOES show up in my list, but the link doesn’t work when I select it. I’m not sure where I’m going wrong here–help would be much appreciated!

Share link:

It seems like you can’t link to it because it’s a fixed element. The navbar is always at the top of the viewpoint, not necessarily always at the top of the page.

For the user to go back to the top, you need to give an ID to the hero_homepage div, or whatever is at the top of the page.

However I will stand corrected if a more experienced user corrects me! :smiley:

I’m sure there may be an easier way, however…

I created a div block called top_div, gave it an ID of top div, gave it a height of 1px and placed it above the hero section.

I linked your Back to Top button, the the top div ID, and I then made that div block a symbol which then placed it at the top of every page with position: relative

This seems the quickest way I could do it.

Ahhh that makes sense! I will try your fix.

Success! I have an irrational aversion to creating empty elements… but in this case it came in handy. Great tip, thanks!

Woohoo!! My first go at troubleshooting for someone, glad I could help :smiley:

I totally get that :laughing:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.