hello, i want to add an event for scroll to top page to the button. but it seems that feature is not available in streamlit. i also tried to integrate java code but it is not accepting it.
can someone guide how can i add this feature in my app
1 Like
Does this help?
hello,
thankyou for the response. As i want to built an event where button is clicked then the page scroll back on the top. For that the javascript is not working
Nest the st.components under a button, then it will only write on the page with a button click. You might use containers to ensure it gets written into a container at the end of the app and not add spacing. I don’t know of any solution that will let you get around using javascript, so you’ll basically need a workflow where it’s written on the page then removed before the next time you want to execute it.
If it’s conditioned on a button, that will take care of 99% of the issue. The only edge case that wouldn’t work is if someone clicks a button at the bottom to scroll to the top, then scrolls back down and clicks it again without interacting in some other way first. If you want to take care of this edge case, you can use an st.empty in combination with the button to execute and remove the code in a single execution of your script.
so there is no solution for the scroll to top button?
The solution I described is this:
import streamlit as st
import time
st.write('meow ' * 10_000)
js = '''
<script>
var body = window.parent.document.querySelector(".main");
console.log(body);
body.scrollTop = 0;
</script>
'''
if st.button("Back to top"):
temp = st.empty()
with temp:
st.components.v1.html(js)
time.sleep(.5) # To make sure the script can execute before being deleted
temp.empty()
1 Like
thanks that worked 
hey
there is a little bug
after st.components.v1.html(js) the blank space occurs in the app
how to remove it
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.