Forum Academy Marketplace Showcase Pricing Features

»Scroll Back To Top«-Button

Hey there!

Just tried to build a »Scroll Back To Top«-Button with a floating group (alignment bottom) and an arrow icon linking to the header. Unfortunately this doesn’t work since the group is not appearing at all.

Am I doing something wrong or do you have a better solution for me?

Cheers
JB

Can you share a link? It’s difficult to say without seeing

1 Like

Put the Page element in the “element” property?

1 Like

Thanks for your replies. The “Scroll to” action is not the thing which is not working. I want to create this button as a floating one (aligned ‘bottom‘). This is not working.

That’s what I but it’s difficult to see why it’s not floating if we can’t see in the app.
Have a look at the right bottom when you scroll down on this page.

This is exactly what I am looking for.

It’s an icon in a floating group that appears when page scroll position is xxx. It scrolls to a shape I have at the top of the page.

My problem is that the floating group I created is not visible at all in Debug mode. What is my mistake?

I don’t know. It’s impossible to say without seeing what you did. Have you tried creating a new one?

@julian.bansemer, unless you provide a link to your app (if it’s a public app) or copy the page into the Forum app ( https://bubble.io/page?type=api&id=forumapp3&tab=tabs-1 ), it’s going to be very hard for anyone to help you.

To copy your page from your app to the forum app, all you have to do is

  1. Create a new page in the forum app
  2. Right click on the page in your app
  3. Select “Copy with workflow”
  4. Go to Forum app page
  5. Right click and select “Paste with workflow”
1 Like

Double-check to make sure your Float Group is not visible on page load, and the conditional statement in the float group is something like 'When “Current page scroll position > 600” then “This element is visible”.
Make sure the statement does not use an equal sign such as: ‘When “Current page scroll position = 600”’. (I did that originally… :slight_smile: )

*Also have the Float Group sitting next to the scroll bar at the position of the page you’d like it to be, and float it to ‘Top’ not ‘Bottom’.

  1. Add a floating group
  2. Vertically float relative to Bottom
  3. Put an icon inside with arrow up
  4. Conditional Current page scrolling position is not 0 then is visible
  5. The icon Uncheck option This element is visibel on page load
  6. Icon Onclick event = Elements Actions >> Scroll to Index
3 Likes

:wink: I picked it up. Very practical. And… the best: we avoid plugins only to this.