How to create a simple Back to Top botton

A simple Back to Top Button with smooth scroll, for long pages or for when you want to add a modern feature to a site that only display once the site visitor has scrolled down the page a fraction.
With an example if it’s possible…
Thank you very much
:relaxed:

  1. If you have a top row section, give that an ID by clicking on that element, then click on the [cog] icon.
  2. Name the ID anything you want. (example: ‘top’)
  3. Then add a button at the bottom of your page.
  4. With that button selected, click on the [cog] icon.
  5. In the link area, click on the page section button, then open the drop down menu.
  6. Find the ID you made (like ‘top’)
  7. pat yourself on the back =)
18 Likes

Very Nice! @soulfree64
Splendid that it offers so many different icon options. Hopefully the script remains trustworthy and doesn’t get injected/hacked with any harmful code. Always suspicious of linking to external scripts.

@WebFlow, please offer a native element to add this same functionality.

2 Likes

@mmediaman @soulfree64 There’s no need to add any external scripts, just follow @PixelGeek’s steps above :point_up:

Hope that helps! :smile:

4 Likes

@callmevlad yes, that is as you and @PixelGeek describe and very relevant to the context of the OP title.

The external script identified by @soulfree64 is a step further though and more elegant as it is always visible and floats above the content once the user scrolls past a certain point in the page. Perhaps you can update us on how to do that natively in Webflow.

Thanks. :+1:

2 Likes

@mmediaman Sure thing! Just change the position setting to Fixed and that should do the trick :smile:

Note that Webflow allows you to style this however you’d like, e.g. you can use a Link Block element instead and place a custom image inside.

Also, if you happen to have relative elements that have a higher “Z Index” on the page, you can increase the z-index of this button so that it always appears on top:

1 Like

You can also set up an interaction to show this button only after some other element scrolls out of view, for example here I can have this button appear when the Header scrolls out of view, and disappear when the Header is fully visible:

  1. Give the “Scroll to Top” button Opacity: 0 to hide it by default
  2. Add an interaction to the Navbar to show/hide the “Scroll to Top” button

Here’s the preview link for this site in case you want to check out the settings: Webflow - smoothscroll

3 Likes

@callmevlad, very awesome! Webflow continues to impress :facepunch:

2 Likes

@callmevlad what if I want the Go to Top button appear at the second half of the total page length and disappear whenever the user scrolls back to the first half of the page? I have multiple sections at the bottom part, and they are different from page to page.

1 Like

Hey @ilya there are multiple ways to do this actually.

What I do is create a div for the top content, and then for the content below and put all of the respective content inside of those divs.

https://webflow.com/website/anchor-to-top

If you set both of the top & bottom content sections to relative positioning & set the bottom section (where your anchor link is) to overflow: hidden. Give the anchor link a position of fixed, and bottom right (or wherever you’d like to place it) and give the top content a z-index that is higher than the bottom content section.

This will result in this:
http://anchor-to-top.webflow.io/

Then if you’d like to create a scroll interaction, keeping the same styling above you can do the following:

Set an initial appearance for the anchor link to be 100% down (or right depending on where you’d like to the link to come in from).

Then set a scroll trigger on the bottom content to move the Anchor Link back to Origin (HINT: When you click the translate icon and click off, it automatically sets to origin) when you scroll into view, and back down when you scroll out of view (give the scroll into view an offset of 25% or so if you’d like to see the animation take place).

Example: http://anchor-to-top.webflow.io/anchor-scroll-trigger
(This is just a second page in the Webflow link above). :smile:

Please let me know if you have any questions.

Thank you,

Waldo

1 Like

Thanks @Waldo for the guide. I wonder if the two divs is a feasible way of development if I plan to have embedded sections inside of them.
Second, I need the To top buttom for the existing site with numerous pages. It’s a kinda lot of handwork.

@ilya You can also set a scroll out of view interaction on the hero section to make the back to top button appear, and when you scroll into view the button goes back down. That’s a much easier solution for what you’re working on. :smile:

1 Like

Thanks that did the trick :smile:

1 Like

Hi Waldo. Thank you for your help. I tried to open those links, but they dont seem to work anymore. I would like to have this floating “Back to Top” Button once you scroll out of the hero section.

Is there a way to still see your example and how its made?

Best
George