Back to top button inside footer symbol

Hi there! I am curious to know how to make the ‘back to top’ button functional if it’s inside a symbol [linked to hero section ID]? We can set up it for each page individually, although it’s inside a symbol, it does not seem to work on live site. Any idea about this?

Live site: https://chiefofstaff.network/

Read Only Link: https://preview.webflow.com/preview/chief-of-staff?utm_medium=preview_link&utm_source=designer&utm_content=chief-of-staff&preview=3e748389017141141a9e9d25fc1395be&pageId=5f7b1f9b53f1b0e547359660&mode=preview

Hi @chintansavaliya all you have to do is to unlink instance of symbol you want to make some change inside
CleanShot 2020-11-08 at 09.42.59

Thanks, @Stan. But I think then it will no longer be connected to the symbol and I won’t be able to assign global changes.

Yes that’s correct but I thing that it’s only option. Im using this method for Back to Top in footer in current project. I just do not assign routes if I presume there will be some changes in footer. Once footer is fully done (by design) then I will unlink and set routes. When there is need for some change (client wish) I will change main symbol and copy / unlink new version or if it is only small change I will do change for each instance.

I have now identical situation with main menu where menu links are pointing to sections of homepage but there are 2 extra pages and menu links from these pages have to be pointed to sections on homepage so main menu on extra page have to be pointed to URL to external page and not only section. And also footer BTT in this pages is set to point into different top section.

May be someone will know how to do this without unlink but that’s why this option is there.

EDIT
Or may by you can do it programmatically to write some if-else condition as you can do within modules (JS,React …) but I never did that in Webflow as unlink is easier to use. If unlink is no option in your case you can look this way and figure out if this will work.

@Stan
Yeah, thanks for sharing! Currently not facing this much complexity but this question comes into mind in almost most of the projects. The other way around I can think of is to make it absolute at the bottom, relative to the body instead of including it in the footer symbol.

Yes, this is how most BTT are done (reveal in certain percentage of page when on scroll), but my client requested to be in footer. :wink:

1 Like

Hi @chintansavaliya please feel free to check any response as solution to mark this question as solved :slight_smile:

1 Like

I found another way where you do not have to unlink the symbol and we can work on any page with the same back to top button.

Simply add an embed where you add the anchor link and the class to style the button. Do not forget to add the class to your assets so it stays even if you clean up your styles.

I did created a html embed with an anchor #top (an empty div on top of each page) and a class of “top__back” (I styled in webflow before):

In programming is always several ways how to achieve identical result all depends on source and needs.

Try this…

  1. Wrap the highest point of content (hero section for example) in a div, and set its ID to ‘top’.

  2. All you need to do is set the back to top link inside your symbol to External Link > /#top

  3. So long as you wrap the highest piece of content on the page with a div ID’s ‘top’, the footer back to top link will always work!

Hope that helps, no custom code either.

1 Like