Streaming live at 10am (PST)

How to insert a "go to top of page" link


#1

On long pages, I want to add a widget that will take the user back to the top of the page, and that will appear pinned on the right or left after the user scrolls down past the top section of the page. Any ideas on how to do this?


#2

Hi @rcstot

One way to do this could be:

  • Give the top section an ‘ID’ of for example ‘home’.
  • Create your widget - let’s say a button, but it could be a link block - style as you wish.
  • Position the block by giving it ‘fixed’ bottom right or bottom left.
  • In settings make it link to a ‘section on a page’ - and choose ‘home’.

Then you can use Interactions to show and hide the button on page scroll.

For example if you had a section 2 - then you could set the block to display none as an initial state, but when section 2 scrolls into view, that’s the trigger for it to appear. Once that is done it’s easy to add a reverse effect so it disappears as you scroll back up (or click).


#3

Yes, that’s a good idea. The only problem I see with that is for long pages that have sections 3,4,5, 6, having to put that widget in on each one. But I think your idea is a good start and Ill try it for sure. thanks!


Floating link back to top of page
#4

Just make sure the button appears after leaving section 1 and disappears when entering it. This way you can have any number of sections and the functionality will still work as intended.


#5

Yep agree with @mikeyevin - essentially this should float over as you scroll down any number of sections :+1:t2:


#6

thanks, I’ll definitely try that.
Now on to learning about showing/hiding buttons (which I haven’t done before–just started Webflow when Adobe decided to kill Muse).


#7

Some useful concepts here:

Interactions 1.0 - you will hear these referred to as ‘Legacy’ interactions - but they are for the time being still very much in use: https://university.webflow.com/article/show-and-hide-a-navbar-on-scroll

Interactions 2.0 - aka IX2 - even more powerful, and worth a good chunk of your time to master: https://university.webflow.com/article/show-hide-navbar-on-scroll

Those are for navbars - but you will be able to see the concept and adapt to other elements :slightly_smiling_face:

Quick shout to fellow moderator @vincent who has this independent site with many tips and tricks as you find your way around, or hit stumbling blocks: https://inb4.webflow.io/