Floating back to top button

Bootstrap Studio Help
1

Hi, does anyone know a way to get a floating back to top button in Bootstrap Studio? This seems to have become a very popular method of getting back to the top of page when viewing long page content.

2

Hi if you search the online components when you are in the app and type “back to top” you should find one you can use ?

You can then drag it to the bottom of your design - I shared a simple component so I know it’s there

3

I tried this but got a search result message " no online components found". Could this feature been removed in BS v4 ?

4

Philcobra,

Search for "Scroll to top" in the online components. That's the one I use. It works in Bootstrap 3 and 4.

5

I tried your suggestion and was very happy to find that it works great! This has made life a lot easier. Thanks for your help with this problem Phill

6

You are welcome. Glad to be able to help.

7

hi

I installed the Scroll to Top and dragged this component to the Body and it placed it at the end of the tree structure. But when I previewed the page, it is empty and I coulddn’t see anything.

What did I done wrongly? Thanks

8

Try using what I created and made available in the library.

Back To Top - by Gilmar de Oliveira Aguiar

Observation:

1 - before using you will need to remove what has already been added, such as the css and js that it loaded into your project;
2 - install the button;
3 - when adding it to your project, make sure you have selected the CSS and JS installation it has.

The difference with this button is that:

It makes a smooth transition as it appears and disappears.

Scrolling to the top of the page is also smooth, does not add anything to the site’s URL and nor does it need an anchor reference on the site.

9

Here’s a very simple way to make a back to top button using BSS’s built-in animation feature. Requires no JS and just a few CSS rules…

  1. Drag a Div into your project. Give it an an ID of btop
  2. Drag a link into the Div and drag an icon into the link. Delete the “Link” text and change the icon to something like Font Awesome 5 fas fa-arrow-circle-up.
  3. Select the Link in the Overview panel, go to the Options panel and under Link Options change the Target to Top. Leave the # in the URL field.
  4. Select the Div and add the following Animation settings to it…
    Trigger: Scroll
    Type: slide-up
    Offset (px): 1000 (NOTE: this can be changed to whatever distance you want the person to scroll before the button appears.)
  5. Add the following CSS to your custom stylesheet
#btop {
position: fixed;
bottom: 0;
right: 10px;
font-size: 40px;
z-index: 9999;
}

That’s it. Now when you scroll down 1000 pixels, the button will slide up into view. If you scroll up less than 1000 pixels, or click it, it will slide down out of view. Since the position is fixed, it makes no difference where you place the Div in your HTML structure. I usually put it inside the footer on all my sites just for consistency. If you want to be able to see through it, add an opacity rule in the CSS. The size is determined by the font-size rule. The position is determined by the bottom and right rules. You can also change the color (otherwise it will use the default link and link hover colors.)