Scroll to Top Not Working on HuggingFace

🔒 Gradio
1

Is there a way to add a scroll to top button that floats and follows as you scroll.

style.css

#toTopBtn {
	position: fixed;
        bottom: 10px;
        float: right;
        right: 18.5%;
        left: 77.25%;
	height: 30px;
        max-width: 100px;
        width: 100%;
        font-size: 12px;
        border-color: rgba(217,24,120, .5);
        background-color: rgba(35,153,249,.5);
        padding: .5px;
        border-radius: 4px;
   }

import pandas as pd
back_to_top_btn_html = '''
<button id="toTopBtn" onclick="window.scrollTo({ top: 0, behavior:'smooth'});"><a style="color:white; text-decoration:none;">Back to Top!</a></button>
'''

df = pd.DataFrame(range(0, 10000))

with gr.Blocks(css = 'style.css') as app:
    gr.DataFrame(df)
    gr.HTML(back_to_top_btn_html)

app.launch(debug = True,
           share = False)

I’ve got this working locally but not on HuggingFace?

2

hi @bradley6597, Unfortunately when you’re using a Space via our hub, i.e. https://huggingface.co/spaces/YOU/SPACE, your Space page is shown via an Iframe, inside an iframe the document page behaves differently, there is no really scroll happening, thus the position fixed won’t work as expected.

However you can get the expected behavior by accessing the Space page directly, https://YOU-SPACE.hf.space/

If you still want to scrollTo top, you can use element.scrollIntoView() or use the iframeResizer present on our hub pages .

import gradio as gr
import pandas as pd
back_to_top_btn_html = '''
<button id="toTopBtn" onclick="'parentIFrame' in window ? window.parentIFrame.scrollTo({top: 0, behavior:'smooth'}) : window.scrollTo({ top: 0 })">
<a style="color:white; text-decoration:none;">Back to Top!</a>
</button>'''

style="""
#toTopBtn {
	position: fixed;
        bottom: 10px;
        float: right;
        right: 18.5%;
        left: 77.25%;
	height: 30px;
        max-width: 100px;
        width: 100%;
        font-size: 12px;
        border-color: rgba(217,24,120, .5);
        background-color: rgba(35,153,249,.5);
        padding: .5px;
        border-radius: 4px;
   }
"""

df = pd.DataFrame(range(0, 1000))

with gr.Blocks(css=style) as app:
    gr.DataFrame(df)
    gr.HTML(back_to_top_btn_html)
app.launch()