How can i scroll up - inner HTML component

I made RadioButton component that make output to HTML components.
in my project, RadioButton’s change_function loads html codes and push it to HTML components.

I want to scroll up the inner HTML components when RadioButton’s change-function called.
in chrome when i click other button in Radio button, html components change successfully but they remember the scroll position. they should be scolled to top.

i dont know about frontend web programming.

I tried to make html button to scroll up with css alternatl, this html button works but it scroll up entire page, not inner HTML components pages.

should i render or update HTML components or something? help please

+) I write codes inner HTML, css like ‘#box {overflow: auto}’

hi @abcnew,

can you share a Space example? I’d be happy to help. You might need to target a child element on the box to achieve the scroll and might need to use ‘#box {overflow-y: scroll !important } for force that style

hi @radames thank you for your help!

def render(clicked_button):

    return ("<div>" + clicked_button * 10 + "</div>" + "<p> newline </p]>") * 100

with gr.Blocks(css="#box { height: 500px; overflow-y: scroll !important}") as demo:
    with gr.Row():
        with gr.Column():
            radio_button = gr.Radio(["a", "b", "c"])
        with gr.Column():
            html_output = gr.HTML(elem_id="box")



this is my sample code.
i tried your solution but there are still some problems yet

when i click radio button “a”, then html output should be rendered.
and then i scrolled down html_output, and i choose another radio button “b”,
new rendered html output still remember(?) the scroll position.

new html output should be scolled up to top as soon as i choose another button.
could you please check my sample code? :melting_face: