Asking for hovering "Back to top" button references and how-to

Dash Python
1

Hi! I’ve been searching for ways to add a hovering “Back to top” button on the bottom right side of my screen once the user has started scrolling without any luck. Does anyone knows how to do this or maybe can direct me to the right documentation on how to do it?

Thanks in advance!

1 Like
2

Hello @mangarapaul !

From your description it sound like you are looking for Affix from Dash Mantine Components. Check it here: Dash

Just let us know if you also need help with some callback :slight_smile:

3

Affix might be what you can show, but how to do you get it to show. :grin:

You can use Js with an event listener for scroll position.

4

I found this topic: How to implement a button with the function "back to top of the page" by callback?

Just wrap your buttom into html.A component and link it to home compoment. If you would need help with some example let me know I can look at it tomorrow.

5

Hi! I’m new to html so it would be really helpful if you can share some example :smiley:

Thanks in advance!!

6

Hi @martin2097 , that would be super helpful! I’m new to HTML so I’m kinda confused about where to start with adding the back-to-top button. Do you have some example codes that I can take a look at and study from?

Thanks in advance!

7

I got it to work! As per the recommendation from this topic:

I add an id=‘home’ on my very first dbc.Row and then add then add a dcc.Link with a dmc.Affix inside somewhere down in the layout code. The code looks like this:

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dcc.Markdown('# Anime Stats Dashboard',
                         id='home', 
                         style={'textAlign': 'left', 
                                'color': 'black',
                                'marginTop': '20px'})
        ], width=12)
    ]),

## some other layout codes 

    dcc.Link(
        dmc.Affix(dmc.Button("Back to top"), 
                  position={"bottom": 20, "right": 20},
                  ),
        href="#home"
    ),

Now the next big question is, how do I make the button only visible when the user starts scrolling?

8

Check out the javascript code that I posted about.

You can add the event listener from a clientside callback in which it add the event listener to the document/window.

9

Hi @jinnyzor , do you have a dash python code example? I never worked with javascript before so I’m not sure where to start writing the code.

10

Hello @mangarapaul,

Sure thing:

app.clientside_callback(
    """function (id) {
        var myID = document.getElementById(id)
    
        var myScrollFunc = function() {
          var y = window.scrollY;
          if (y >= 400) {
            myID.style.display = ""
          } else {
            myID.style.display = "none"
          }
        };
        
        window.addEventListener("scroll", myScrollFunc);
        return window.dash_clientside.no_update
    }""",
    Output('button', 'id'),
    Input('button', 'id')
)

Where ‘button’ is your affix component.

11

It worked! Thank you so much!

1 Like
12

good job @mangarapaul ! This was exactly my idea I am glad you managed to execute!