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?
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.
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):