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

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?

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

4 Likes

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!

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.

1 Like

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

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

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: Navbar show & hide on scroll | Webflow University

Interactions 2.0 - aka IX2 - even more powerful, and worth a good chunk of your time to master: Navbar show & hide on scroll | Webflow University

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/

Just add a link or link block and set the URL to #top

1 Like

We dealt with this issue in a client project and created a script that allows you to create a button that will scroll you to the top of the page.

Here is a link to the tutorial video that walks you through the question, and then the solution from start to finish.

If there are any questions please feel free to tag me!

Happy Saturday!