Scroll to Top Not Working on HuggingFace
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?
2023-03-28T19:09:42Z
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 useelement.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()