{"id":26284117,"url":"https://github.com/bowespublishing/streamlit-scroll-to-top","last_synced_at":"2025-05-07T12:12:27.676Z","repository":{"id":267673248,"uuid":"902003616","full_name":"bowespublishing/streamlit-scroll-to-top","owner":"bowespublishing","description":"Wish there was an easy to scroll to the top of your streamlit page or a certain point on your page? Well now you can...","archived":false,"fork":false,"pushed_at":"2024-12-12T01:19:05.000Z","size":66646,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T09:51:10.429Z","etag":null,"topics":["python","streamlit","streamlit-component","streamlit-components"],"latest_commit_sha":null,"homepage":"https://scroll-to-top-demo.streamlit.app/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bowespublishing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-11T18:05:16.000Z","updated_at":"2025-03-21T08:49:21.000Z","dependencies_parsed_at":"2024-12-11T19:31:35.530Z","dependency_job_id":null,"html_url":"https://github.com/bowespublishing/streamlit-scroll-to-top","commit_stats":null,"previous_names":["bowespublishing/streamlit-scroll-to-top"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bowespublishing%2Fstreamlit-scroll-to-top","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bowespublishing%2Fstreamlit-scroll-to-top/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bowespublishing%2Fstreamlit-scroll-to-top/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bowespublishing%2Fstreamlit-scroll-to-top/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bowespublishing","download_url":"https://codeload.github.com/bowespublishing/streamlit-scroll-to-top/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252542085,"owners_count":21764908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["python","streamlit","streamlit-component","streamlit-components"],"created_at":"2025-03-14T18:21:16.791Z","updated_at":"2025-05-07T12:12:27.657Z","avatar_url":"https://github.com/bowespublishing.png","language":"Python","funding_links":["https://buymeacoffee.com/bowespublishing"],"categories":[],"sub_categories":[],"readme":"# streamlit-scroll-to-top\nStreamlit component which provides a hacky workaround to utilise streamlit buttons, iframes and state management to redirect users to different points on a page.\n\n[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://scroll-to-top-demo.streamlit.app/)\n\n[![PyPI](https://img.shields.io/pypi/v/streamlit-scroll-to-top)](https://pypi.org/project/streamlit-scroll-to-top/)\n[![PyPI - Downloads](https://img.shields.io/pypi/dm/streamlit-scroll-to-top)](https://pypi.org/project/streamlit-scroll-to-top/)\n\n\u003ca href=\"https://buymeacoffee.com/bowespublishing\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" height=\"50\" width=\"180\"\u003e\u003c/a\u003e\n\n![](./img/demo.gif)\n\n## How does it work?\n\nThe component works by creating an invisible iframe in the location you want to scroll to and then tells the parent window to move the focus to that iframe. See the Example usage further below to get a further idea of how it works/how to implement it in your code. There are other ways to do this however I wanted a way I could easily use streamlit buttons \u0026 the session state to move the user to different locations.\n\nThis may stop working at any moment or indeed may not work on some browsers. I've tested on Edge, Chrome, Firefox \u0026 Opera and all appears to be OK\n\n## Features\n\n- Scroll to the top of a page (or any point) easily using existing Streamlit buttons.\n\n## Installation\n\n```shell script\npip install streamlit-scroll-to-top\n```\n\n## Example Usage\n\nCopy this code snippet:\n\n```python\nimport streamlit as st\nfrom streamlit_scroll_to_top import scroll_to_here\n\n# Step 1: Initialize scroll state in session_state\nif 'scroll_to_top' not in st.session_state:\n    st.session_state.scroll_to_top = False\n    \nif 'scroll_to_header' not in st.session_state:\n    st.session_state.scroll_to_header = False\n\n# Step 2: Handle the scroll-to-top action\nif st.session_state.scroll_to_top:\n    scroll_to_here(0, key='top')  # Scroll to the top of the page, 0 means instantly, but you can add a delay (im milliseconds)\n    st.session_state.scroll_to_top = False  # Reset the state after scrolling\n\n# Step 3: Define a scroll function to trigger the state change\ndef scroll():\n    st.session_state.scroll_to_top = True\n    \ndef scrollheader():\n    st.session_state.scroll_to_header = True\n\n# Step 4: Add some dummy content to simulate a long page\nst.title(\"Dummy Content\")\nst.write(\"Scroll down to see the 'Scroll to Top' button.\")\nfor i in range(50):  # Generate dummy content\n    if i == 25:\n        if st.session_state.scroll_to_header:\n            scroll_to_here(0, key='header')  # Scroll to the top of the page, 0 means instantly, but you can add a delay (im milliseconds)\n            st.session_state.scroll_to_header = False  # Reset the state after scrolling\n        st.header(\"Or scroll here\")\n    st.text(f\"Line {i + 1}: This is some dummy content.\")\n\n# Step 5: Add a button to trigger the scroll to top action. Both ways work... personal preference\nst.button(\"Scroll to Top\", on_click=scroll)\nif st.button(\"Scroll to Top 2\"):\n    st.session_state.scroll_to_top = True\n    st.rerun()\n    \n# Step 5: Add a button to trigger the scroll to header action. Both ways work... personal preference    \nst.button(\"Scroll to Header\", on_click=scrollheader)\nif st.button(\"Scroll to Header 2\"):\n    st.session_state.scroll_to_header = True\n    st.rerun()\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbowespublishing%2Fstreamlit-scroll-to-top","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbowespublishing%2Fstreamlit-scroll-to-top","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbowespublishing%2Fstreamlit-scroll-to-top/lists"}